Animated button icons using pseudo elements and html entities

These buttons use :before and :after pseudo elements that contain html entities which animate on button hover or focus. Because html entities are already available client side this is a nice lightweight solution for adding a bit of extra character and context to your buttons.

#Examples

The core principle is the same in all these example buttons and I have created several variations to demonstrate the principle but they could be extended further to use all sorts of different transitions or animations. Hover with your mouse, or tap the buttons if you're on a touchscreen to see the animations.

btn-prev btn-next btn-download btn-reply btn-external btn-submit btn-code btn-tick btn-cross btn-email btn-comment btn-quote btn-question btn-star

#How to create this effect

I've simplified the css here to keep it clear but if you visit the github repo or inspect the css you will see I am also providing vendor prefixes and other css properties that would distract from the core bits that I am explaining here.

#The button

First we set up some defaults for the buttons themselves. There's a lot you can do to personalise the buttons so I've only included the bits that are relevant for the effect I am demonstrating. Html entities are essentially text so it's important to set up the button with some strict properties around how that text is displayed and that we're leaving enough padding at the sides for our icons.

.btn {
    transition: all 0.2s ease;
    display: inline-block;
    padding: 0.666em 2em;
    font-size: 1em;
    line-height: 1em;
    background-color: #61c8f6;
    color: #ffffff;
}

#The icon

Now we set up an animated icon on the button of which this is a very simple example. The default color of the icon is the same as the background color of the buttons so it is invisible until hover or focus at which point we apply our transform or animation.

.btn-external:after {
    content: "\2192";
    position: absolute;
    right: 0.75em;
    font-family: arial, sans-serif;
    color: #61c8f6;
}

.btn-external:hover:after,
.btn-external:focus:after {
    transform: rotate(-45deg);
    color: #ffffff;
}

Which gives us this: btn-external

The above example uses a simple right arrow which is used as → when in html but in the content of your pseudo element you should use an escaped version of the hex reference of the same entity. To do this you just need to convert it like so: → -> content: "\2192";.

#Important information about font support

W3c publishes a useful list of common html entities but you should be aware that some of these entities may be rendered differently in any custom fonts you may want to use. For that reason I recommend using a simple sans-serif font such as arial for the pseudo elements as in my tests they seemed to be more likely to render consistently across browsers. Some fonts do not include the more obscure entities so if you have problems with rendering these entities you will need to experiment with using different fonts and there is a helpful source of information at fileformat.info which should come in handy.

#More info

Check out the code on github