Monday, 27 April 2015

How to Create Buttons and Icons with CSS

Ladies and Gentlemen, the days of creating a PNG for each icon on your website are over!  Back in my day, we had to create images and hover-over images for every single icon we wanted to use.  That’s two images per social networking icon you wanted to link to and two icons for every single button! In today’s world, there are a few tricks to help make sure you never need a PSD with a million buttons again.

Firstly, you should already be using CSS to create buttons.  If you are still using images, don’t worry, I won’t tell anybody.  Quit that bad habit and use only CSS for buttons.  If you are behind the times, let me catch you up. Create a CSS class and give it some padding, a background-color, and a border radius. That’s it! Now you have a button. Give yourself a pat on the back and keep reading this article. 

To add the hover effect, just add the hover selector to your class and change the background color. To make it really look nice and edgy, experiment with different font colors, border colors, and especially transparent backgrounds. 

Pro Tip:  Add a transition effect so the hover-over fades in nicely.

Buttons are easy, but what about icons?  What about social media icons?  Or print icons?  Or email icons?  Thankfully technology has an answer for that as well.  If you are as old as I am, you may remember “Wingdings”.  “Wingdings” is a font that uses symbols instead of ordinary characters.  Now, there are free fonts that use icons as characters, saving you a lot of frustration and the server a lot of load.  My favorite free font icon set is FontAwesome.  There are others but this is the one I will be discussing because...


Now, on to how to use these fonts as icons. First, download the font you want to use from their website, use a CDN or WordPress plugin if available.  FontAwesome has a CDN provided by MaxCDN you can use.  This means you do not have to install or download anything.  Then, just paste this line into your header and you’re good to go:

<link rel="stylesheet" href="//">

FontAwesome can create the icon you are looking for by using classes.  The element will need the class ‘fa’ and then the name of the icon.

Example: class=”fa fa-envelope”

You can then set all of the other properties to override the CSS element.  In the example below, I’m using FontAwesome for the social media icons.  Some icons have different colors and hover effects than others. 

Pro Tip: Some icons have different padding elements to help make it a nice round circle.

FontAwesome has other variables you can use for other effects like changing the size, rotating and animating the icons, aligning left or right, and more. Check out their examples page to see what other effects you can use on your page. While you’re at it, take a look at their cheat sheet for more icons.

Using CSS buttons and font icons can take a lot of weight off your server because they’re mobile-friendly and lightweight.  There are other fonts that use icons but make sure to read the documentation to use them properly. 

Have you used font icons before?  Which ones do you use?  Let us know in the comments below or tweet us @Swagger_Media!