Example of CSS Animation

How to start

Buttons add an additional layer of interaction to your website and increase user engagement. We use CSS animations to make these buttons more appealing to the user, which positively affects the engagement levels.
This is especially important for websites that generate revenue. For example, e-commerce sites engage customers with add to cart or checkout buttons. Articles, on the other hand, want users to click buttons to serve readers more content. With either model, buttons and CSS are part of the process.

If you are starting out or are building products for customers. A better solution is to add a few buttons with animations to engage users with content. Without them, users will arrive on a less attractive webpage.

Here is an example of a CSS animation below. The element includes a CSS animation to scale in and out the HTML button. The CSS styles below names an animation called “float”. When the page is loaded, the CSS styles executes “float”, triggering the animation. The button now animates a scaling effect with a duration of 2 seconds and an infinite time. This CSS animation will stop when the page is closed by the user. Let’s use the example below. Let’s take a look at how to make this button.

To start, we need to make a div container wrapping a button element
in order to display the button.

<div class="parent">
  <button>Try Free</button>
</div>

Second, we define the style of parent container below.

.parent {
    width: 100%;
    height: 200px;
    padding: 70px 0 30px 0;
    background-color: #f5f5f5;
}

Now we have our basic container and html written. It’s time to give the button it’s styles.

.parent button:hover {
   background: #6f5de0;
   border-color: #6f5de0;
}

.parent button {
    margin: 0 auto;
    width: 200px;
    height: 50px;
    background-color: #ffffff;
    border: 2px solid #676767;
    animation-name: float;
    animation-timing-function: ease-in-out;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    color: #F4F5F7;
    background: #4d3fa3;
    border: 1px solid #4d3fa3;
    color: #F4F5F7;
    font-weight: 500;
    border-radius: 3px;
    display: block;
    cursor: pointer;
    padding: 0 16px;
    transition: all 250ms;
    font-family: 'Roboto',arial,sans-serif;
}

Last, we will finally add the animation style.

/* The animation code */
@keyframes float {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.1, 1.1);
  }
}

The Full CSS and HTML Snippet

To fork or edit this animation. Just click the link below to visit the code on codepen.io https://codepen.io/anon/pen/aXVKNy You can find the full example of the tutorial below.

CSS Styles

<style>
.parent {
    width: 100%;
    height: 200px;
    padding: 70px 0 30px 0;
    background-color: #f5f5f5;
}

.parent button:hover {
   background: #6f5de0;
   border-color: #6f5de0;
}

.parent button {
    margin: 0 auto;
    width: 200px;
    height: 50px;
    background-color: #ffffff;
    border: 2px solid #676767;
    animation-name: float;
    animation-timing-function: ease-in-out;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    color: #F4F5F7;
    background: #4d3fa3;
    border: 1px solid #4d3fa3;
    color: #F4F5F7;
    font-weight: 500;
    border-radius: 3px;
    display: block;
    cursor: pointer;
    padding: 0 16px;
    transition: all 250ms;
    font-family: 'Roboto',arial,sans-serif;
}

/* The animation code */
@keyframes float {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.1, 1.1);
  }
}
</style>

HTML Code

<div class="parent">
  <button>Try Free</button>
</div>