Since reading the article Just some other awesome CSS3 buttons I become interested about how you can use this effect to get icons on buttons without using any images.
As a web developer I don't really get on with images and if I can avoid using them I will, so when I saw this trick about displaying icons in a button without using any images I wanted to explorer what other icons you can use just by using CSS.
I discovered that there are loads and loads of icons that can be used in your CSS by using Hexadecimal entities.
There are lots of places I found to get the codes for these icons here is a list of places I used to get the most useful icons for this example.
From these lists I was able to find all sorts of different codes which could be useful on your websites.
Now we have got the codes for the icons we want I am going to show you how to put them into a button just by using CSS and the :before selector to add content to your class.
Copy the CSS below to use as your button.
All we need to do on this is add a padding and margin to position the before selector in the correct location.
Copy the below CSS to use for the before:selector.
Now we have got content in the before selector we can create new CSS classes for the different content we want to use.
Below are the different icons which I've found and you can use on your pure CSS icon buttons.
Here are the button you could use on forms.
If you would like to display some currency in the buttons.
Display temperature symbols for celsius and fahrenheit.
There are lots of different maths symbols here are some which I think will be useful.
You can display different arrow types.
There are loads more icons to use here are some of the most useful.
As a web developer I don't really get on with images and if I can avoid using them I will, so when I saw this trick about displaying icons in a button without using any images I wanted to explorer what other icons you can use just by using CSS.
I discovered that there are loads and loads of icons that can be used in your CSS by using Hexadecimal entities.
There are lots of places I found to get the codes for these icons here is a list of places I used to get the most useful icons for this example.
From these lists I was able to find all sorts of different codes which could be useful on your websites.
Now we have got the codes for the icons we want I am going to show you how to put them into a button just by using CSS and the :before selector to add content to your class.
Creating The Button
First we need to create the button in this example we are just using a simple CSS3 rounded corner rectangle as the button.Copy the CSS below to use as your button.
.buttons
{
display: inline-block;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */
border: 1px solid #a1a1a1;
padding: 0 2em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
border-radius: .2em;
}Add The :before Selector
Now we have created the button we need to add the before selector so we can use this to add content to your button.All we need to do on this is add a padding and margin to position the before selector in the correct location.
Copy the below CSS to use for the before:selector.
.buttons:before
{
float: left;
width: 1em;
text-align: center;
font-size: 1.7em;
margin: 0 0.5em 0 -1em;
padding: 0 .2em;
pointer-events: none;
}Now we have got content in the before selector we can create new CSS classes for the different content we want to use.
Below are the different icons which I've found and you can use on your pure CSS icon buttons.
Form Buttons
Here are the button you could use on forms.
/*Forms*/
.add:before { content: "\271A"; }
.edit:before { content: "\270E"; }
.delete:before { content: "\2718";}
.save:before { content: "\2714";}
.email:before { content: "\2709";}
.cross:before { content: "\2716"; }Currency Buttons
If you would like to display some currency in the buttons.
/*Currency*/
.dollar:before { content:"\0024"; }
.euro:before { content:"\20AC"; }
.pound:before { content: "\00A3"; }
.cent:before { content: "\20B5"; }Temperature Buttons
Display temperature symbols for celsius and fahrenheit.
/*Temp*/
.celsius:before { content: "\2103"; }
.fahrenheit:before { content: "\2109"; }Maths Symbols Buttons
There are lots of different maths symbols here are some which I think will be useful.
/*Math & Factions*/
.pi:before { content: "\213C"; }
.one_thrid:before { content: "\2153"; }
.two_thrid:before { content: "\2154"; }
.one_fifth:before { content: "\2155"; }
.two_fifth:before { content: "\2156"; }
.three_fifth:before { content: "\2157"; }
.four_fifth:before { content: "\2158"; }
.one_sixth:before { content: "\2159"; }
.five_sixth:before { content: "\215A"; }
.one_eighth:before { content: "\215B"; }
.three_eighth:before { content: "\215C"; }
.five_eighth:before { content: "\215D"; }
.seven_eighth:before { content: "\215E"; }
.quarter:before { content: "\00BC"; }
.half:before { content: "\00BD"; }
.three_quarter:before { content: "\00BE"; }Arrows Buttons
You can display different arrow types.
/*Arrows*/
.next:before { content: "\279C"; }
.left_arrow:before { content: "\2190"; }
.up_arrow:before { content: "\2191"; }
.right_arrow:before { content: "\2192"; }
.down_arrow:before { content: "\2193"; }
.up_left_arrow:before { content: "\2196"; }
.up_right_arrow:before { content: "\2197"; }
.down_left_arrow:before { content: "\2199"; }
.down_right_arrow:before { content: "\2198"; }Misc Buttons
There are loads more icons to use here are some of the most useful.
/*Symbols*/
.like:before { content: "\2764"; }
.star:before { content: "\2605"; }
.spark:before { content: "\2737"; }
.play:before { content: "\25B6"; }
.watch:before { content: "\231A"; }
.blacksun:before { content: "\2600"; }
.cloud:before { content: "\2601"; }
.umbrella:before { content: "\2602"; }
.snowman:before { content: "\2603"; }
.blackstar:before { content: "\2605"; }
.whitestar:before { content: "\2606"; }
.blackphone:before { content: "\260E"; }
.whitephone:before { content: "\260F"; }
.saltire:before { content: "\2613"; }
.hot_drink:before { content: "\2615"; }
.skull:before { content: "\2620"; }
.radioactive:before { content: "\2622"; }
.biohazard:before { content: "\2623"; }
.peace:before { content: "\262E"; }
.yingyang:before { content: "\262F"; }
.frowning_face:before { content: "\2639"; }
.smiling_face:before { content: "\263A"; }
.first_quarter_moon:before { content: "\263D"; }
.last_quarter_moon:before { content: "\263E"; }
.wheelchair:before { content: "\267F"; }
.recycle:before { content: "\267D"; }
.recycle2:before { content: "\267C"; }
.music_note:before { content: "\266C"; }
.warning:before { content: "\26A0"; }
.male_and_female:before { content: "\26A4"; }
.scissors:before { content: "\2701"; }
.airplane:before { content: "\2708"; }
.snow:before { content: "\2042"; }