Buttons With Icons Using CSS

Buttons with icons using CSS
258 Flares 258 Flares ×

Buttons with Icons using CSS and Icon font

Buttons always plays an very important role in any website so that any user can make some action. To make the buttons more appealing, it’s a great idea to use buttons with icons on website. Icons actually make the buttons more appealing and reflects the significance of after-click effect.

Today we will be creating very simple but attractive buttons with icons. You can use them in your next project and enhance the look. The icons we have used in this tutorial is from Fontello.

Using the Buttons

The following snippet will add the simple utility button with common class btn-icon


<a class="btn  btn-icon" href=#><i class="icon-cogs"></i><span>Settings</span></a>

For Social icons we have created some simple classes just to provide them custom brand colors. For each social button there is a different class. For example: for facebook there is btn-facebook class, for twitter btn-twitter and so on.


<a class="btn  btn-icon  btn-facebook" href=#><i class="icon-facebook"></i><span>Facebook</span></a>

Icons

For the icons, we are using icon-font not the png images. To use the font icons, use the following line of code.


<i class="icon-facebook"></i>

The <i> tag is used to show up the icon with the specific class added to it. Following are the various icon classes you can use inside your button. If you need some more icons then just visit the Fontello website, choose your icons, replace the font files and .css file and you’re done!

Fontello Icons

Fontello Icons

CSS

To style our buttons we are using very simple kind of css.


/* Button */
.btn {
	font-size:26px;
    margin:6px;
    clear: both;
    font-family: monospace;
    white-space: nowrap;
}

/* Button elements */
.btn > span,
.btn-icon > i {
    padding: 12px 16px;
    display: inline-block;
    transition: 0.25s all;
}
.btn > span {
    border-radius: 4px;
    white-space: nowrap;
    color: #222;
    background: #ddd;
}
.btn:hover > span,
.btn:focus > span {
    background: #95a5a6;
}
.btn:active > span {
    background: #95a5a6;
    transition: none;
}

/* Button with an icon */
.btn-icon > i {
    border-radius: 6px 0 0 6px;
    position: relative;
    font-style: normal;
    color: white;
    background: #222;
}

.btn-icon > i:after { /*This is to create the arrow beside the icon*/
    content: "";
    border: 9px solid;
    border-color: transparent transparent transparent #222;
    position: absolute;
    top: 18px;
    right: -18px;
}

.btn-icon:hover > i,
.btn-icon:focus > i {
    color: #ddd;
}
.btn-icon > span {
    border-radius: 0 6px 6px 0;
}

Now lets customize the buttons and give them some custom colors, for our Social buttons.

/* Button custom states */
.btn-favorite:hover > i,
.btn-favorite:focus > i { color: #ffd700; }
.btn-favorite > span { background: #ffd700; }

.btn-add:hover > i,
.btn-add:focus > i { color: #add8e6; }
.btn-add > span { background: #add8e6; }

.btn-delete:hover > i,
.btn-delete:focus > i { color: #ff4500; }
.btn-delete > span { background: #ff4500; }

/* Social buttons */
.btn-facebook:hover > i,
.btn-facebook:focus > i { color: #3b5998; }
.btn-facebook > span { background: #3b5998; }

.btn-twitter:hover > i,
.btn-twitter:focus > i { color: #00aced; }
.btn-twitter > span { background: #00aced; }

.btn-pinterest:hover > i,
.btn-pinterest:focus > i { color: #cb2027; }
.btn-pinterest > span { background: #cb2027; }

/* Same for all the social buttons */

In this way we have created beautiful, flat buttons with icons using simple CSS and Icon font. You can download the demo from above demo-download box and don’t forget to mention what you think about these buttons in the comment section below.

258 Flares Twitter 8 Facebook 9 Google+ 13 LinkedIn 225 Pin It Share 3 258 Flares ×
author avatar

Akash is a blogger, amateur photographer, speaker and a UI designer from Pune, India. He loves designing UI for websites and web applications for his clients. You can get in touch with him akash@dzyngiri.com | Twitter | Facebook

Connect with us

One Comment

  1. Is it possible for these buttons to have 2 lines of text? I have tried various ways and can’t get the icon to like up properly.
    Thanks.

Leave a Reply

(*) Required, Your email will not be published