Stylish Multicolor Buttons with Icons (Generator)

Thursday 5 March 2015

Stylish Multicolor Buttons with Icons (Generator)

If you are a Blogger then you must have some links in your Site. Maybe, those are some referral links, download links, etc. No Style Links looks similar to texts so this should better if have some Simple but stylish buttons in your site. So here it is...

Buttons is in nine different colors and in two sizes. Even Buttons supported Custom colors to. You can add your own custom color that is familiar to your site style. More, buttons supported font awesome icons too. Even more, for newbie those has no knowledge about HTML can easily generate codes by generator. So, lets get started but check demo first...

Check Buttons Preview

Below is the CSS means styling of Buttons. Add below codes in between <head> tag.

<style>
/* Buttons for Blog/Site
   Creator: Design Devta
   URL: www.DesignDevta.Blogspot.Com
   By: Harman Singh Hira (Fb.me/HSinghHira)
*/
.btn {
    color: #fff;
    border: 0;
    background-color: #333;
    display: inline-block;
    padding: 6px 16px;
    margin: 0 5px 10px 0;
    font-size: 14px;
    font-family:arial;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    position: relative
}
.btn:hover {
    background-color: #222 !important;
    color: #fff;
    text-decoration: none;
    outline: 0
}
.large {
    padding: 12px 28px;
    font-size: 18px
}
.expand {
    display: block;
    width: 100%
}
.turquoise {
    background-color: #1abc9c
}
.turquoise:hover {
    background-color: #16a085
}
.green {
    background-color: #2ecc71
}
.green:hover {
    background-color: #27ae60
}
.blue {
    background-color: #3498db
}
.blue:hover {
    background-color: #2980b9
}
.darkblue {
    background-color: #34495e
}
.darkblue:hover {
    background-color: #2c3e50
}
.purple {
    background-color: #9b59b6
}
.purple:hover {
    background-color: #8e44ad
}
.red {
    background-color: #f85050
}
.red:hover {
    background-color: #c0392b
}
.orange {
    background-color: #f1c40f
}
.orange:hover {
    background-color: #f39c12
}
.grey {
    background-color: #95a5a6
}
.grey:hover {
    background-color: #7f8c8d
}
</style>

Now click on below button to generate HTML codes. Add them in <body> tag or in post where you want to display buttons.

Buttons Generator

Customization:

#1: If you want to add Icons in Button then add below code in <head> tag.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

Click here to go Font Awesome site. Then choose icon and click on it. Copy icon code, looks like: <i class="fa fa-pencil-square-o"></i>. Add them before button title. Example below.

<a href="http://example.com" class="btn large turquoise"><i class="fa fa-bullhorn"></i> Turquoise
 button</a>

#2: Now, if you want to add custom color in buttons then use below codes

<a href="http://example.com" class="btn" style="background-color:#000;color:#fff;">Custom button</a>

#000 is the background color of button
#fff is the text color of button

Replace colors code with your own choose. You can get some help here to select colors code.

#3: To expand button (100% width), add expand in button class.

<a href="http://example.com" class="btn large green expand">Custom button</a>

Thank you for patronizing Design Devta. I am sure your visit to us must be quite satisfying and in line with your expectations from us. Just in case, it's not as you expected from us or if you are facing any problem, kindly forward your feedback's directly to us by leave a Comment below or using our Contact form. And, get assured response from my side. Your feedback's and suggestions are extremely valuable to us. Please, if you like our this post then share on your social network. Assuring you of our best service always.