Attractive/Cool Css Buttons Styles For Blogger

Vertical bar is also really helpful, when
we need to keep some link on side bar.
So, this vertical bar include nice hover
style like dancing style.Earlier i posted
about How To Add Cool Vertical Drop
Down Menu For Blogger. Its also include
nice style with drop down.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/AVvXsEi7J1JMvlhedDPMHWzK4bNlsGdK43BWMPxEBYUYmk03EwjquoW-LVkBuzYyLNBSdyfhLcVM0Eo-BhxTk-paYI3D-KJVjYuUQPWaIUGSNmiLSLPTpOa4KvU_tU7Kf1kAnaaJv1oF0kXrn7U/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...