Add Awesome/Beautiful/Cool CSS3 Buttons In Blogger

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).

Awesome/Beautiful/Cool CSS3 Buttons Demo

Live Demo

How To Add CSS3 Buttons In Blogger

Go to Blogger Dashboard
Click on DropDown Menu and select Template
Backup your Template before making any changes to your blog
Now Click on Edit HTML --> Proceed --> Expand Widget Templates
Press Ctrl + F and search the code shown below

]]></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/AVvXsEgU_OZ3eL9OZzlPh7g56u01XZSxeRNj6uusxKBgFvTIEUPJXFWCDeO4-v-yhDvNVew0JESs1JmNjFxyDzQqWlrz_lEqoex7pMxK4FUC2acMx8asSfSNZvD6CoR7xW0dv2r0J4aeS46vOoo/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; }

How To Use These Buttons

Use the HTML code shown below in your post

HTML code for Large buttons

HTML code for Medium buttons

HTML code for Small buttons

Replace LINK with link URL and LINK NAME with the name/title of your link

Like it? Share it.

2 comments

Unknown

21 July 2012 at 09:11 Author

how did you add the black background ?

21 July 2012 at 09:35 Author

@Tanmay Kapse Using this code
<div style="background: #333;padding: 30px 5px;>
<a class="large blue awesome">Blue Button</a>
</div>

Click to Add a New Comment

If you're asking a question click on Subscribe By Email link, on the comment form, to be notified of replies.
Do NOT add links to the body of your comment as they will not be published.
Only the comments posted in ENGLISH will be approved.
If you have a problem check first the comments , maybe you will find the solution there.