5 CSS3 Gradient Hover Buttons For Blogger

This are the very awesome gradient buttons for blogger which are made of pure css3. This buttons have a gradient hover effect. This gradient buttons can be used for demo's, downloads and other redirects.They are very easy to use and do not need to add a big HTML code to be used. You can also use this buttons in your post.This buttons have a great beautiful look, so they will make your blog look better. I have made this buttons in 5 different colours. If you want to some more colours you can have comment below for that colour and i will provide you will that colour. So have a look a them.

Features:

• Made of Pure CSS3.
• Have a Hover Effect.
• Gradient Background.

Steps To Add Gradient Buttons to Blogger:

• Log in to your Blogger Account.
• Go to Templates >> Edit HTML.
• Find for ]]></b:skin> tag.
• Paste any of the CSS code before ]]></b:skin> tag.
• Then paste that buttons HTML code where you want the button to appear.

Gradient Blue Button:

Demo

CSS Code:

    .sbm-blue {
     
        -moz-box-shadow: -2px 12px 21px -14px #284470;
        -webkit-box-shadow: -2px 12px 21px -14px #284470;
        box-shadow: -2px 12px 21px -14px #284470;
     
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #415989), color-stop(1, #516ca3));
        background:-moz-linear-gradient(top, #415989 5%, #516ca3 100%);
        background:-webkit-linear-gradient(top, #415989 5%, #516ca3 100%);
        background:-o-linear-gradient(top, #415989 5%, #516ca3 100%);
        background:-ms-linear-gradient(top, #415989 5%, #516ca3 100%);
        background:linear-gradient(to bottom, #415989 5%, #516ca3 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#415989', endColorstr='#516ca3',GradientType=0);
     
        background-color:#415989;
     
        -moz-border-radius:7px;
        -webkit-border-radius:7px;
        border-radius:7px;
     
        border:1px solid #1f2f47;
     
        display:inline-block;
        color:#ffffff;
        font-family:Trebuchet MS;
        font-size:17px;
        font-weight:bold;
        padding:11px 32px;
        text-decoration:none;
     
        text-shadow:0px 1px 0px #263666;
     
    }
    .sbm-blue:hover {
     
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #516ca3), color-stop(1, #415989));
        background:-moz-linear-gradient(top, #516ca3 5%, #415989 100%);
        background:-webkit-linear-gradient(top, #516ca3 5%, #415989 100%);
        background:-o-linear-gradient(top, #516ca3 5%, #415989 100%);
        background:-ms-linear-gradient(top, #516ca3 5%, #415989 100%);
        background:linear-gradient(to bottom, #516ca3 5%, #415989 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#516ca3', endColorstr='#415989',GradientType=0);
     
        background-color:#516ca3;
    }
    .sbm-blue:active {
        position:relative;
        top:1px;
    }

HTML Code:

<a class='sbm-blue' href='Your Redirect Link'>Button name</a>

Gradient Green Button:

Demo

CSS Code:

.sbm-green {
     
        -moz-box-shadow: -3px 8px 25px -8px #91b8b3;
        -webkit-box-shadow: -3px 8px 25px -8px #91b8b3;
        box-shadow: -3px 8px 25px -8px #91b8b3;
     
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77b55a), color-stop(1, #72b352));
        background:-moz-linear-gradient(top, #77b55a 5%, #679e4a 100%);
        background:-webkit-linear-gradient(top, #77b55a 5%, #679e4a 100%);
        background:-o-linear-gradient(top, #77b55a 5%, #679e4a 100%);
        background:-ms-linear-gradient(top, #77b55a 5%, #679e4a 100%);
        background:linear-gradient(to bottom, #77b55a 5%, #679e4a 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a', endColorstr='#679e4a',GradientType=0);
     
        background-color:#77b55a;
     
        -moz-border-radius:7px;
        -webkit-border-radius:7px;
        border-radius:7px;
     
        border:1px solid #4b8f29;
     
        display:inline-block;
        color:#ffffff;
        font-family:Trebuchet MS;
        font-size:17px;
        font-weight:bold;
        padding:11px 32px;
        text-decoration:none;
     
        text-shadow:0px 0px 0px #5b8a3c;
     
    }
    .sbm-green:hover {
     
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #72b352), color-stop(1, #77b55a));
        background:-moz-linear-gradient(top, #679e4a 5%, #77b55a 100%);
        background:-webkit-linear-gradient(top, #679e4a 5%, #77b55a 100%);
        background:-o-linear-gradient(top, #679e4a 5%, #77b55a 100%);
        background:-ms-linear-gradient(top, #679e4a 5%, #77b55a 100%);
        background:linear-gradient(to bottom, #679e4a 5%, #77b55a 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#679e4a', endColorstr='#77b55a',GradientType=0);
     
        background-color:#72b352;
    }
    .sbm-green:active {
        position:relative;
        top:1px;
    }

HTML Code:

<a class='sbm-green' href='Your Redirect Link'>Button name</a>

Gradient Grey Button:

Demo

CSS Code:

.sbm-grey {
     
        -moz-box-shadow: -3px 8px 25px -8px #3e7327;
        -webkit-box-shadow: -3px 8px 25px -8px #3e7327;
        box-shadow: -3px 8px 25px -8px #3e7327;
     
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
        background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
        background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
        background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
        background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
        background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
     
        background-color:#768d87;
     
        -moz-border-radius:7px;
        -webkit-border-radius:7px;
        border-radius:7px;
     
        border:1px solid #566963;
     
        display:inline-block;
        color:#ffffff;
        font-family:Trebuchet MS;
        font-size:17px;
        font-weight:bold;
        padding:11px 32px;
        text-decoration:none;
     
        text-shadow:0px 1px 0px #2b665e;
     
    }
    .sbm-grey:hover {
     
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
        background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
        background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
        background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
        background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
        background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
     
        background-color:#6c7c7c;
    }
    .sbm-grey:active {
        position:relative;
        top:1px;
    }

HTML Code:

<a class='sbm-grey' href='Your Redirect Link'>Button name</a>

Gradient Red Button:

Demo

CSS Code:

.sbm-red {
     
        -moz-box-shadow: -3px 8px 25px -8px #b54b3a;
        -webkit-box-shadow: -3px 8px 25px -8px #b54b3a;
        box-shadow: -3px 8px 25px -8px #b54b3a;
     
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a73f2d), color-stop(1, #b34332));
        background:-moz-linear-gradient(top, #a73f2d 5%, #b34332 100%);
        background:-webkit-linear-gradient(top, #a73f2d 5%, #b34332 100%);
        background:-o-linear-gradient(top, #a73f2d 5%, #b34332 100%);
        background:-ms-linear-gradient(top, #a73f2d 5%, #b34332 100%);
        background:linear-gradient(to bottom, #a73f2d 5%, #b34332 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a73f2d', endColorstr='#b34332',GradientType=0);
     
        background-color:#a73f2d;
     
        -moz-border-radius:7px;
        -webkit-border-radius:7px;
        border-radius:7px;
     
        display:inline-block;
        color:#ffffff;
        font-family:Trebuchet MS;
        font-size:17px;
        font-weight:bold;
        padding:11px 32px;
        text-decoration:none;
     
        text-shadow:0px 1px 0px #7a2a1d;
     
    }
    .sbm-red:hover {
     
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b34332), color-stop(1, #a73f2d));
        background:-moz-linear-gradient(top, #b34332 5%, #a73f2d 100%);
        background:-webkit-linear-gradient(top, #b34332 5%, #a73f2d 100%);
        background:-o-linear-gradient(top, #b34332 5%, #a73f2d 100%);
        background:-ms-linear-gradient(top, #b34332 5%, #a73f2d 100%);
        background:linear-gradient(to bottom, #b34332 5%, #a73f2d 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b34332', endColorstr='#a73f2d',GradientType=0);
     
        background-color:#b34332;
    }
    .sbm-red:active {
        position:relative;
        top:1px;
    }

HTML Code:

<a class='sbm-red' href='Your Redirect Link'>Button name</a>

Gradient Yellow Button:

Demo

CSS Code:

.sbm-yellow {
     
        -moz-box-shadow: -3px 8px 25px -8px #ffe0b5;
        -webkit-box-shadow: -3px 8px 25px -8px #ffe0b5;
        box-shadow: -3px 8px 25px -8px #ffe0b5;
     
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
        background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
        background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
        background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
        background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
        background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);
     
        background-color:#fbb450;
     
        -moz-border-radius:7px;
        -webkit-border-radius:7px;
        border-radius:7px;
     
        display:inline-block;
        color:#ffffff;
        font-family:Trebuchet MS;
        font-size:17px;
        font-weight:bold;
        padding:11px 32px;
        text-decoration:none;
     
        text-shadow:0px 1px 0px #8f7f24;
     
    }
    .sbm-yellow:hover {
     
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
        background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
        background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
        background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
        background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
        background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);
     
        background-color:#f89306;
    }
    .sbm-yellow:active {
        position:relative;
        top:1px;
    }

HTML Code:

<a class='sbm-yellow' href='Your Redirect Link'>Button name</a>

Enjoy using these Buttons in your Blog.

If have any doubt or If you like our post Please Comment.