ADD AWESOME/BEAUTIFUL/COOL CSS3 BUTTONS IN BLOGGER

Wednesday, 5 September 2012

ADD AWESOME/BEAUTIFUL/COOL CSS3 BUTTONS IN BLOGGER

at 03:31 Posted by Unknown Labels: Blog Hacking Tips

This tutorial will show you How To Add Awesome/Beautiful/Cool CSS3 Buttons In Blogger. This button set contains buttons of 8 different colors (black,pink,green,magentablue,red,orange and yellow) and 3 sizes (large, medium and small). These buttons are designed byzurb.com and after some customization to these buttons i am sharing on Latesthack for my readers.

AWESOME/BEAUTIFUL/COOL CSS3 BUTTONS DEMO

Live Demo

HOW TO ADD CSS3 BUTTONS IN BLOGGER

Go to Blogger Dashboard --> Design --> Edit HTML
Backup your Template before making any changes to your blog
Now Expand Widget Templates
Find the code shown below using [ctrl+F]

]]></b:skin>

Now Paste the Code shown below just before/above it

.awesome, .awesome:visited {
    background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJbUg-43Fu0-MvDFCXYND8vTJZ7CRImazJHJhj7WrwUN3H02Ct29E2FTYG6McgkTuZa5kNCQDX-pKEBYme7u6QzrRPSXWeKNClxPBBldbOQDWPpOHcb3-23FsqFfD-JjYLhzoePfBjrmc/s1600/alert-overlay.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; }