Web Developer, CSS

How to animate a button with CSS

Sometimes when building websites, we need to draw the user's attention to a specific area or even more so to a particular action. Here we will describe how you can easily animation your buttons with just a little bit of CSS.
Published: 04/14/2022 4:59 pm
Updated: 04/14/2022 5:00 pm
#css #web development #web page #web page design #css animations #button animations #html
April 2022 | Work Heavy

Overview

Sometimes when building websites, we need to draw the user's attention to a specific area or even more so to a particular action. Most of all web pages should have call-to-actions, and most of them will be in the form of a button. So how do you get someone's attention drawn to the button? CSS animations to the rescue! Here we will describe how you can easily animation your buttons with just a little bit of CSS.

Create HTML File for Demo

First let's create the basic HTML file for this demo. Below is just a simple web page with some initial CSS and buttons. The class demo-container is just for the sake of demo not for the button animation. The button class is our base style for the buttons, it is just some basic font, padding, and colors. We will look to animation the color & padding later. The my-anim-button class is where we will apply the animation. Right now there is one button with my-anim-button and one with out it so we can see the difference.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Button Hover Color Example</title>

    <style>
        .demo-container{
            -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
            -moz-box-sizing: border-box;    /* Firefox, other Gecko */
            box-sizing: border-box;         /* Opera/IE 8+ */
            width:100%;
            text-align: center;
            padding: 100px;
        }

        .button{
            font-size: 110%;
            padding: 10px 15px;
            cursor: pointer;
            background-color:cornflowerblue;
            color:white;
            border: none;
            margin-bottom: 20px;
        }

        .my-anim-button{

        }

        .my-anim-button:hover{


        }

    </style>
</head>
<body>
<div class="demo-container">
    <button class="button">Click me?</button>
    <br>
    <button class="button my-anim-button">Click me!</button>
</div>

</body>
</html>

Once we have that code, our web page will look like such.

Basic buttons on HTML page

Adding the Keyframes

Now we will add the magic to the style. In order to animated the button we need keyframes with changing style. Let's create a keyframe called blue_green with 3 steps, one at 0%, one at 50%, and another at 100%. These steps will be the changing CSS at a given percentage of the animation cycle. So for the background-color, we start at cornflowerblue, then go to green half way through the animation, and then back to cornflowerblue at the end.

<style>
    .demo-container{
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
        width:100%;
        text-align: center;
        padding: 100px;
    }

    .button{
        font-size: 110%;
        padding: 10px 15px;
        cursor: pointer;
        background-color:cornflowerblue;
        color:white;
        border: none;
        margin-bottom: 20px;
    }

    .my-anim-button{

    }

    .my-anim-button:hover{


    }


    @keyframes blue_green {
        0% {background-color: cornflowerblue;padding: 10px 15px;}
        50% {background-color: green;padding: 15px 20px;}
        100% {background-color: cornflowerblue;padding: 10px 15px;}
    }

</style>

Applying the Keyframes

Now that we have the keyframes defined, let's add it to our button via the class my-anim-button. Let's also start with it just on the hover action. You can see that we added a 1 second infinite animation to the hover action of the class.

<style>
    .demo-container{
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
        width:100%;
        text-align: center;
        padding: 100px;
    }

    .button{
        font-size: 110%;
        padding: 10px 15px;
        cursor: pointer;
        background-color:cornflowerblue;
        color:white;
        border: none;
        margin-bottom: 20px;
    }

    .my-anim-button{

    }

    .my-anim-button:hover{
        animation: blue_green 1s infinite;
    }


    @keyframes blue_green {
        0% {background-color: cornflowerblue;padding: 10px 15px;}
        50% {background-color: green;padding: 15px 20px;}
        100% {background-color: cornflowerblue;padding: 10px 15px;}
    }

</style>

Here is out button in action when you hover over it.

Button animation on hover on HTML page

Now let's add a new keyframe for a different color and apply it to the button when no action is taken. Here we create the keyframes called blue_purple with the same style changes, except here we also change the text color. We then simply apply it just like we did to the hover action but instead we apply it to the base class definition.

<style>
    .demo-container{
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
        width:100%;
        text-align: center;
        padding: 100px;
    }

    .button{
        font-size: 110%;
        padding: 10px 15px;
        cursor: pointer;
        background-color:cornflowerblue;
        color:white;
        border: none;
        margin-bottom: 20px;
    }

    .my-anim-button{
        animation: blue_purple 1s infinite;
    }

    .my-anim-button:hover{
        animation: blue_green 1s infinite;

    }

    @keyframes blue_purple {
        0% {
            background-color: cornflowerblue;
            padding: 10px 15px;
            color:white;
        }
        50% {
            background-color: purple;
            padding: 15px 20px;
            color:black;
        }
        100% {
            background-color: cornflowerblue;
            padding: 10px 15px;
            color:white;
        }
    }

    @keyframes blue_green {
        0% {background-color: cornflowerblue;padding: 10px 15px;}
        50% {background-color: green;padding: 15px 20px;}
        100% {background-color: cornflowerblue;padding: 10px 15px;}
    }


</style>

Here is out button animation without the user taking any animation.

Button animation on HTML page

Summary

So there you have it. We've just created a simple animation cycle for our call-to-action button! Now you can play around with the possible style changes and see what you like best. Then you can apply it to your live website and test the result! For complete demo source, you can find the code here.