Cool CSS3 Buttons With Hover Effects

Hi ! Its been a while since I my last post, But, Due to overwhelming success of my last post on CSS buttons, I was inspired to design some more buttons, Thanks for all your Support and Love. Today, Lets look at some more CSS3 buttons. These buttons are compatible with Mozilla Firefox, Chrome, Safari, Opera, IE9(As it supports CSS3 now) and all other major browsers too. These buttons do not use any background images, therefore these are purely CSS3 buttons with include hover effects.  You only have to copy and paste these buttons in you stylesheets and use them anywhere in your blog or website.

Instructions For adding these cool buttons to your blog

1. Click on the ‘Demo’ button.
2. If you like the button then, come back here and copy the CSS code that is mentioned below the DEMO button.
3. Login to Blogger Dashboard, Then go to Design >> Edit HTML
4. Paste the copied CSS code just above ]]></b:skin>
5. To add these buttons in blog post, Click on Edit HTML while writing the post and add this code there –>   <span class='ebbtn'><a href=’#URL’>TEXT HERE</a></span>
6. In the above code replace ‘#URL’ with URL links and ‘TEXT HERE’ with the text that has to appear as a link.
7. These buttons can be embedded in posts, sidebars, footers, navifation bars or anywhere at your blog.
8. These buttons can also be used in any of the websites by adding the CSS to your external stylesheets and HTML code remains the same as above.
9. So, Follow the steps above, Enjoy these cool buttons and enhance the look of your blog !

1.Wordpress Dashboard Style Button

This button is similar to the buttons that you see in wordpress dashboard. Look at the demo and compare both of them : P
Demo Wordpress Button

/*CSS For Wordpress Button */
.ebbtn a{
padding: 5px 10px;
background-color: #ffffff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ededed)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #ffffff, #ededed); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #ffffff, #ededed); /* FF3.6 */
background-image: -ms-linear-gradient(top, #ffffff, #ededed); /* IE10 */
background-image: -o-linear-gradient(top, #ffffff, #ededed); /* Opera 11.10+ */
background-image: linear-gradient(top, #ffffff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#ededed'); /* IE6–IE9 */
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
border:1px solid #666;
display: inline-block;
color: #666;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.ebbtn a:hover {
border:1px solid #000000;
color:#000000;
}

2.Cool White Gradient Button with Hover Effects

This is pretty much like the above button except for border radius and it fades out on hover. Have a look at it…
Demo White Gradient Button

/*CSS For White Gradient Button */
.ebbtn a{
padding: 5px 10px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #8c8c8c;
display: inline-block;
color: #333333;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
-moz-transition: all 0.3s ease-out;  /* FF4+ */
-o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
-ms-transition: all 0.3s ease-out;  /* IE10? */
transition: all 0.3s ease-out; 
}
.ebbtn a:hover {
color:#000000;
-moz-box-shadow: 0px 0px 2px #000; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 2px #000; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 2px #000; /* Opera 10.5, IE9, Chrome 10+ */
}

3.CSS3 SkyBlue Button

Demo CSS3 SkyBlue Button

/*CSS For White Gradient Button */
.ebbtn a{
padding: 5px 10px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #8c8c8c;
display: inline-block;
color: #333333;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
-moz-transition: all 0.3s ease-out;  /* FF4+ */
-o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
-ms-transition: all 0.3s ease-out;  /* IE10? */
transition: all 0.3s ease-out; 
}
.ebbtn a:hover {
color:#000000;
-moz-box-shadow: 0px 0px 2px #000; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 2px #000; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 2px #000; /* Opera 10.5, IE9, Chrome 10+ */
}

4.CSS3 Blue Button

Demo CSS3 Blue Button

/*CSS For Blue Button */
.ebbtn a{
padding: 5px 10px;
background: rgb(122,188,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border:1px solid #666;
display: inline-block;
color: #ededed;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.ebbtn a:hover {
border:1px solid #000000;
color:#fff;
}

5.Cool Black Gloss Button

Demo Black Gloss Button

/*CSS For Black Gloss Button */
.ebbtn a{
padding: 5px 10px;
background: rgb(174,188,191); /* Old browsers */
background: -moz-linear-gradient(top, rgba(174,188,191,1) 0%, rgba(110,119,116,1) 50%, rgba(10,14,10,1) 51%, rgba(10,8,9,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(174,188,191,1)), color-stop(50%,rgba(110,119,116,1)), color-stop(51%,rgba(10,14,10,1)), color-stop(100%,rgba(10,8,9,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* W3C */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display: inline-block;
color: #eaeaea;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.ebbtn a:hover {
background: rgb(10,14,10); /* Old browsers */
background: -moz-linear-gradient(top, rgba(10,14,10,1) 0%, rgba(10,8,9,1) 16%, rgba(110,119,116,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(10,14,10,1)), color-stop(16%,rgba(10,8,9,1)), color-stop(100%,rgba(110,119,116,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(10,14,10,1) 0%,rgba(10,8,9,1) 16%,rgba(110,119,116,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(10,14,10,1) 0%,rgba(10,8,9,1) 16%,rgba(110,119,116,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(10,14,10,1) 0%,rgba(10,8,9,1) 16%,rgba(110,119,116,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a0e0a', endColorstr='#6e7774',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(10,14,10,1) 0%,rgba(10,8,9,1) 16%,rgba(110,119,116,1) 100%); /* W3C */
color:#fff;
}

6.Green Ease Out CSS Button

Demo Green Ease Button

s
/*CSS For Green Ease Button */
.ebbtn a{
padding: 5px 10px;
background: rgb(210,255,82); /* Old browsers */
background: -moz-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(210,255,82,1)), color-stop(100%,rgba(145,232,66,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* W3C */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #8c8c8c;
display: inline-block;
color: #333333;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
-moz-transition: all 0.3s ease-out;  /* FF4+ */
-o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
-ms-transition: all 0.3s ease-out;  /* IE10? */
transition: all 0.3s ease-out; 
}
.ebbtn a:hover {
color:#000000;
-moz-box-shadow: 0px 0px 2px #000; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 2px #000; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 2px #000; /* Opera 10.5, IE9, Chrome 10+ */
}

7.Youtube Signup Button

Demo Youtube Button

/*CSS For Youtube signup button */
.ebbtn a{
background: -moz-linear-gradient(center top , #83A1D1, #2B59B2) repeat scroll 0 0 #83A1D1;
border-color: #3366CC;
border-radius: 5px 5px 5px 5px;
color: white;
font-weight: bold;
padding: 5px 20px;
display: inline-block;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
}
.ebbtn a:hover, .ebbtn a:focus {
background:#9abdf5;
background-image:-moz-linear-gradient(top,#9abdf5,#2b59b2);
background-image:-webkit-gradient(linear,left top,left bottom,from(#9abdf5),to(#2b59b2));
-ms-filter:'progid:DXImageTransform.Microsoft.Gradient(startColorStr=#9ABDF5, endColorStr=#2B59B2)';
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#9abdf5,endColorStr=#2b59b2)
}

Hey, Did you like them? Then use them at your blog and make it look nice. Have your say below through the comment box and express your opinions.

Get Free Updates of Enhance Blogger : *Do Activate Email Subscription To Enhance Blogger By Clicking the Confirm Link Sent To You