Creating an Animated CSS Button

How to Create a CSS Button With CSS Animation

Using a CSS button adds 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. This positively affects the engagement levels.

CSS Button Example

<div class="parent">
  <button>Try Free</button>
</div>
html {
  height: 100%;
  background: #0a2540;
  font-family: "Roboto", arial, sans-serif;
}

.parent {
  width: 100%;
  height: 200px;
  padding: 70px 0 30px 0;
}

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

.parent button {
  margin: 0 auto;
  width: 200px;
  height: 50px;
  background-color: #fff;
  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;
  box-shadow: 0 2px 4px rgb(0 0 0 / 50%);
}

@keyframes float {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.1, 1.1);
  }
}

Why use a CSS Button?

Engagement is especially important for websites that generate revenue. For example, e-commerce sites engage customers with add to cart or checkout buttons. Blogs, on the other hand, want users to click recommendation buttons to serve readers more content. With either model, buttons and CSS is part of the process.

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

Getting Started

Here is an example of a CSS animation below. The element includes a CSS animation to scale in and out the CSS button. The CSS styles below name an animation called “float”. When the page is loaded, the CSS style 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 make this button by using the example below.

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 the parent container below.

.parent {
  width: 100%;
  height: 200px;
  padding: 70px 0 30px 0;
}

Now we have our basic container and HTML written. It’s time to give the button its style.

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

.parent button {
  margin: 0 auto;
  width: 200px;
  height: 50px;
  background-color: #fff;
  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;
  box-shadow: 0 2px 4px rgb(0 0 0 / 50%);
}

Last, we will finally add the animation style.

@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.

<div class="parent">
  <button>Try Free</button>
</div>
html {
  height: 100%;
  background: #0a2540;
  font-family: "Roboto", arial, sans-serif;
}

.parent {
  width: 100%;
  height: 200px;
  padding: 70px 0 30px 0;
}

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

.parent button {
  margin: 0 auto;
  width: 200px;
  height: 50px;
  background-color: #fff;
  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;
  box-shadow: 0 2px 4px rgb(0 0 0 / 50%);
}

@keyframes float {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.1, 1.1);
  }
}

Looking for More Tutorials?

Jump to our homepage to check for more updates!