Friday, June 17, 2011

Cool CSS3 Buttons With Hover Effects

12 comments
Untitled-3Hi ! 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

Comments

12 comments to "Cool CSS3 Buttons With Hover Effects"

online information said... June 18, 2011 at 8:08 PM

Cool trutorial. I like

Amit M B said... June 18, 2011 at 10:21 PM

@online info You're welcome, pleasure u liked it...

anims said... June 20, 2011 at 5:05 AM

Hey amit, Why not use drop shadows, transitions, transformations and other css3 properties to further enhance the buttons?

Amit M B said... June 20, 2011 at 3:34 PM

Yu, thats a good idea. I have already used css3 transitions like ease-in and ease-out. I am releasing another set of css3 buttons that will have these effects. Thanks for your review...

Edd Turtle said... June 22, 2011 at 3:32 PM

Great Article There’s also a CSS3 Framework for making buttons called Buttonize found at http://css3framework.co.uk/

Amit M B said... June 22, 2011 at 4:25 PM

@EddTurtleOh thank you for giving that link. Nice to see a framework specially for buttons...

Anonymous said... June 22, 2011 at 6:42 PM

the green one look cool man.. thanks :)

Unknown said... March 10, 2012 at 4:03 PM

how to use these button instead of older and new posts...

Amit Mb said... March 10, 2012 at 11:15 PM

Which button would would like to use? I will give you a readymade code for that:)

arunzee said... March 19, 2012 at 10:58 AM

Hey Bro nice post... can you make your codes little bit more readable.. your code font size is small thnku...

Soki Briggs said... September 2, 2012 at 4:46 PM

thanks for this..
it worked like a charm

Anonymous said... March 9, 2013 at 1:02 AM

it's a cool trick, i have applied it on surficle.

Thanks a lot for posting this awesome button.

Post a Comment

Blog Archive

 

About Me

Amit M B
I am a student of 12th standard interested very much in computers, tech stuff and all. It has been a good experience blogging here for some time. As I am pursuing my 2nd year, its being hard to be in touch with blogging, but i daily write some or other thing and finally will get ready for posting every sunday. This is all about me . . .
View my complete profile

Join The Enhance Blogger Community!

Hey Reader, You can join Enhance Blogger Community and be a part of the team, get additional freebies and downloads regularly.

© 2011 Enhance Blogger - Blogger Tricks Content Copyrighted to Amit Mb and may not be reproduced on other websites. | Template Resources by Brian Gardner |