Friday, June 20, 2014

Buttons With Icons Using CSS

Buttons With Icons Using CSS

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.

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!

Buttons With Icons Using CSS

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.