CSS Buttons With Icons But No Images

Demo

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.

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 in order to put an icon in using the CSS we need to add the CSS property of content: "content".

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

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

Currency
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

Temperature
Display temperature symbols for celsius and fahrenheit.

/*Temp*/
.celsius:before    { content: "\2103"; }
.fahrenheit:before { content: "\2109"; }

Maths Symbols Buttons

Maths
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

Arrows
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

Misc
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"; }

Go to the Demo page to see how they look in the browser.

Demo

Advertise here

Comment