Animated buttons using CSS3




What is it?

CSS3 gives a lot of opportunities for doing animations and other graphical effects, so by not thinking of buttons as something that have to be done using the BUTTON tag, but solely as a piece of graphic to be clicked, you gain a ton of opportunities for in regards to being creative with your solutions.

Just to be clear: This type of buttons is not for beginners or impatient people. Some solutions are certainly easier than others, but compared to using a tag and specify a couple of attributes, as you can with most HTML, this is a step up in difficulty.

On this page, I demonstrate a couple of examples, to be used for inspiration. As this is a creative exercise, rather than technique, it is impossible to have an exhaustive coverage of the subject. On several sites on the net, a lot of other examples are also available.





Rolling background color

One of the effects that can be done is rolling background color. The effect uses two parts: a keyframe animation, here we call it ChangeBG, where we specify colors and when in the time frame the changes takes place, and a button. The keyframe goes in the style sheet and looks like this:

@keyframes ChangeBG {

    0%, 5%, 100%{
        background-color: red;
    }

    10%, 15%, 90%{
        background-color: orange;
    }

    20%, 25%, 80%{
        background-color: yellow;
    }

    30%, 35%, 70%{
        background-color: green;
    }

    40%, 45%, 60%{
        background-color: blue;
    }

    50%{
        background-color: magenta;
    }
}


The button we need is just an ordinary DIV, that needs to be styled. This is the code that goes on tbe page:

<DIV CLASS="Button">Rolling background color</DIV>


The styling, which is the class Button, looks like this:

.Button {
    animation: ChangeBG 35s ease-out 1s alternate infinite both;
    color: #FFFFFF;
    margin: 10px;
    height: 50px;
    width: 200px;
    font-size:12.0pt;
    font-weight:bold;
    text-align: center;
    vertical-align:center;
    line-height: 50px;
}


Here we specify which animation to run, and the variables that goes with it, in line 1, and the rest is just styling of a DIV as we know it with size, shape, borders, etc. On the screen, it looks like this:

Rolling background color



Sinking background

An effect which is relatively easy to do, is the illusion of the button sinking into the page at mouse over. The effect consists of three parts. First part is the button itself on the page. Here we use an ordinary DIV, which has to be styled. Here the code that goes on the page looks like this:

<DIV CLASS="Button">Place the pointer here</DIV>


The styling, which is the class Button, looks like this:

.Button {
    transition: background-color .2s ease-in, box-shadow .1s ease-out;
    height: 50px;
    width: 200px;
    margin: 10px;
    font-size:12.0pt;
    font-weight:bold;
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
    vertical-align:center;
    line-height: 50px;
    color: #000000;
    background-color: #D8D8D8;
}


Here you specify the transition, and the variables that goes with it, in line 1, and the rest is just styling of a DIV as we know it with size, shape, borders, etc. Transition is what happens at mouse over, so we have to specify background-color and box-shadow at :hover. That piece of code looks like this:

.Button:hover {
    background-color: #BDBDBD
    box-shadow: inset 1px 1px 3px 2px #6E6E6E;
}


On the screen, the result looks like this:

Place the pointer here






Rotation of text

By combining transform:rotateY() and transition you can make the object rotate, in this case around the y-axis. The effect consists of three parts. First thing we need is the button on the page. Here we just use an ordinary DIV, which has to be styled. Here the code, that goes on the page, looks like this:

<DIV CLASS="Button">Place the pointer here</DIV>


The styling, which is the CLASS Button, looks like this:

.Button {
    transition: transform .8s, ease-out, color .8s, ease-out;
    transform: rotateY(0);
    width:200px;
    margin: 10px;
    text-align:center;
    font-size:12.0pt;
    font-weight:bold;
    cursor: pointer;
    color: #000000;
}


Here you specify transition, and the variables that goes with it, in line 1, and transform i.e. default value for the rotation in line 2. The rest is just styling of a DIV as we know it with size, shape, borders, etc. Transition is what happens at mouse over, so we hae to specify rotation at :hover. That piece of code looks like this:

.Button:hover {
    transform: rotateY(360deg);
}


Here the rotation is set to one full turn. This can obviously be set as you like. by having a default value for the rotation, the object will rotate back to the start position, i.e. at mouse over, the text will rotate a full turn, and when the mouse is removed, the text will rotate back in place. On the screen, the result looks like this:

Place the pointer here


If you want to, you can also rotate around the x-axis by using rotateX. Then it looks like this:

Place the pointer here


Likewise you can rotate around the z-axis, using rotateZ. Then it looks like this:

Place the pointer here



Expanding underline

One of the more elegant ways of underlining is by making an underline that expands to full size. The solution consists of five parts. The first thing you need is the button. Where the previous examples only needed a DIV, this solution requires the button itself, and a separate DIV for the effect. The class for the button we call Button and the DIV we need for the effect, we give the class name ButtonFace. That part looks like this:

<DIV CLASS="Button">
    <DIV CLASS="ButtonFace">Place the pointer here</DIV>
</DIV>


The styling which is the class Button, looks like this:

.Button {
    width:200px;
    margin: 10px;
    text-align:left;
    font-size:12.0pt;
    font-weight:bold;
    cursor: pointer;
    color: #000000;
}


The styling which is the class ButtonFace, looks like this:

.ButtonFace {
    position: relative;
    display:inline-block;
}


Next thing we need is what happens at mouse over. For this particular example, nothing happens, but if you have things like changes in color etc. at mouse over, this is where you place it. Therefore it looks like this:

.ButtonFace:hover {
}


The next part is what makes it all work. Just like you have the selector :hover, you have the selector :before, which makes it possible to insert something before a tag, CLASS or ID. This is where you specify the line and hide it. That piece of code looks like this:

.ButtonFace:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0px;
    left: 0px;
    background-color: #000000;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;

    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
}


If you want other colors, sizes, placement of the line or speed of line extension, this is where you adjust it.

Besides this, we need a combination of :hover and :before, so the line becomes visible at mouse over:

.ButtonFace:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}


The code is now ready. On the screen, the result looks like this:

Place the pointer here


The line starting at the middle, expanding in both directions, is default. If you want the line to start e.g. at the left side, you add the line transform-origin: bottom left to .ButtonFace:before. Then it looks like this:

Place the pointer here