Animated buttons using CSS3

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.

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:



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



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



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:

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:



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



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:



On the screen, the result looks like this:

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:



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



Here you start with specifying transform, i.e. the default angle for rotation, and following this, transition, i.e. the speed of rotation in both directions. Please note that originally you didn't need the prefixes for transform and transition, so, if rotation used to work, but suddenly stopped, This may be the reason. 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 rotation at :hover. That piece of code looks like this:



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:



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



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

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:



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



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



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:



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:



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:



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



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: