Attractive/Cool Css Buttons Styles For Blogger

This is nice buttons style for your blog.
You can follow this easy steps to add it
to your blog.

DEMO

1. Log in to blogger  Design > Page Element.

2. Find this tag by using Ctrl+F   ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

.awesome, .awesome:visited {
    background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6n2BMpu0AJ34yln8UwkXGnbLnab66zdoihp1AADAKYXIzSV2yqhJ1vfPU9M-v2z8azKNzJcvNFLK5dwnOU9lpzYL0rv6mvf_vCnPo-QKXca56w-wdEpi7vMvQLMS3LS3JzPk_UhadBPY/s1600/overlayy.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
        border-radius:5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
font-family:Calibri, Arial, sans-serif;
}

    .awesome:hover                            { background-color: #111; color: #fff; }
    .awesome:active                            { top: 1px; }
    .small.awesome, .small.awesome:visited             { font-size: 18px; padding: ; }
    .awesome, .awesome:visited,
    .medium.awesome, .medium.awesome:visited         { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
    .large.awesome, .large.awesome:visited             { font-size: 30px; padding: 8px 14px 9px; }
   
    .green.awesome, .green.awesome:visited        { background-color: #91bd09; }
    .green.awesome:hover                        { background-color: #749a02; }
    .blue.awesome, .blue.awesome:visited        { background-color: #2daebf; }
    .blue.awesome:hover                            { background-color: #007d9a; }
    .red.awesome, .red.awesome:visited            { background-color: #e33100; }
    .red.awesome:hover                            { background-color: #872300; }
    .magenta.awesome, .magenta.awesome:visited        { background-color: #a9014b; }
    .magenta.awesome:hover                            { background-color: #630030; }
    .orange.awesome, .orange.awesome:visited        { background-color: #ff5c00; }
    .orange.awesome:hover                            { background-color: #d45500; }
    .yellow.awesome, .yellow.awesome:visited        { background-color: #ffb515; }
    .yellow.awesome:hover                            { background-color: #fc9200; }

    .pink.awesome, .pink.awesome:visited        { background-color: #e22092; }
    .pink.awesome:hover                            { background-color: #c81e82; }

4. Now HTML Code here

For Large Buttons

<a href="LINK" class="small awesome">NAME</a>
<a href="LINK" class="small blue awesome">NAME</a>
<a href="LINK" class="small pink awesome">NAME</a>
<a href="LINK" class="small magenta awesome">NAME</a>
<a href="LINK" class="small green awesome">NAME</a>
<a href="LINK" class="small red awesome">NAME</a>
<a href="LINK" class="small orange awesome">NAME</a>
<a href="LINK" class="small yellow awesome">NAME</a>

For Small Buttons

<a href="LINK" class="large awesome">NAME</a>
<a href="LINK" class="large blue awesome">NAME</a>
<a href="LINK" class="large pink awesome">NAME</a>
<a href="LINK" class="large magenta awesome">NAME</a>
<a href="LINK" class="large green awesome">NAME</a>
<a href="LINK" class="large red awesome">NAME</a>
<a href="LINK" class="large orange awesome">NAME</a>
<a href="LINK" class="large yellow awesome">NAME</a>

Replace  Name with your any name.

7. Now save your HTML/Javascript'.

    You are done...