CSS Buttons With Hover Effects

Hello Readers, I have designed some CSS buttons that I would like to share with you. CSS3 has started a new era for Web Designers.I have used some of CSS3 techniques to get these beautiful buttons.These buttons are  professionally designed by me that include hover effects, gradients and borders without the use of any image. These buttons are compatible with all the websites including blogger. I am very excited to release these buttons as I have worked hard for designing these. There a total of 8 buttons to choose from. See the demo, Pick the button that you like and follow the instructions to add these buttons to your blog.

Instructions For adding these cool buttons to your blog

1. Click on the ‘Demo’ button below each of the button description.
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 also be used in any of the websites by adding the CSS to your external stylesheets and HTML code remains the same as above.
8. So, Follow the steps above, Enjoy these cool buttons and enhance the look of you blog !

1. Simple Button :

As the name says, Its a simple button that is found almost everywhere. Its very similar to Google Search button or any classic button. Its Ideal for any tech blogs or classic blogs. 


Simple Button Demo  

/*-CSS Code for Simple button*/
.ebbtn a
{
padding: 5px;
border: 1px outset gray;
background-color:#F7F7F7;
text-decoration:none;
color:#333333;
display: inline-block;
font-family: Georgia, serif;
vertical-align: middle;
}
.ebbtn a:hover
{
border: 1px inset black;
background-color:#CCC;
color:black;
}

2.Simple Button with Hover Gradient

Its pretty much same as the simple button but I have added a gradient when you hover over it. So, it look cooler and nicer than that classic simple button.


Demo Simple Button with Gradient

/*CSS for simple button with gradient hover*/
.ebbtn a {
background:#e6e6e6;
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #444444;
border: 1px solid #999999
}
.ebbtn a:hover {
background: #666666 url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png)repeat-x scroll 0 -100px;
color: #ffffff;
}

3.Sexy Black-Gray Button

I have named this button as Sexy black-gray button  because its a black button which changes to gray when you hover.


Demo Sexy Black Gray Button

/* -CSS for Sexy black-gray button */
.ebbtn a, .ebbtn a:link, .ebbtn a:visited{
background: #404040;
border:solid 1px #555;
margin:0!important;
font-size:12px;
color:#d7d7d7;
text-transform:
uppercase;
padding: 5px 10px;
text-shadow:1px 1px 1px #000;
display:inline-block;
}
.ebbtn a:hover, .ebbtn a:active{
background: #666666;
color:#BBBBBB
}

4.Cool Button with background change

This is a cool button which changes its background colour if you hover around it. So this is and ideal button for any kind of blog. It looks nice.


Demo Cool Background button 

/*CSS for cool background button */
.ebbtn a {
    padding: 5px 10px;
    display: inline-block;
    background: #777 ;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    text-decoration:none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-shadow: 1px 1px #666;
    }
.ebbtn a:hover {
    background-position: 0 -48px;background:#2c6da0;
    }
.ebbtn a:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    padding: 6px 10px 4px;
    }

5.Cool Background Button with border

Its pretty much the same button except that it has a border over it. Some of you may like the same above button with a border. So this is for them.


Simple Button Demo  

/* -CSS For background hover effect with border */
.ebbtn a{
background: #7A7A7A;
border:2px solid #494949;
padding: 5px 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px; border-radius: 3px; ;
display: inline-block; color: #FFFFFF;
font-size: 12px; font-family: Georgia, serif;
text-decoration: none; vertical-align: middle;
}
.ebbtn a:link, .ebbtn a:visited, .ebbtn a:active {
-moz-transition-duration: 0.5s;
color: #026699;
text-decoration:none;
}
.ebbtn a:hover {
background:#075698;
color:#fff;
}

6.Button with Super Gradient Effects

Its a button which uses linear-gradient property of CSS-3 and the remarkable thing about this button is that it is made out only out of CSS. No images are used to make this pretty button.


Button with Super Gradient Effects Demo

/*CSS for sButton with Super Gradient  Effects */
.ebbtn a{
   border-top: 1px solid #009dff;
   background: #0099ff;
   background: -webkit-gradient(linear, left top, left bottom, from(#c6c6c6), to(#0099ff));
   background: -moz-linear-gradient(top, #c6c6c6, #0099ff);
   padding: 6px 12px;
   -webkit-border-radius: 40px;
   -moz-border-radius: 40px;
   border-radius: 40px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 12px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.ebbtn a:hover {
   background: -webkit-gradient(linear, left top, left bottom, from(#c6c6c6), to(#0099ff));
   background: -moz-linear-gradient(top, #c6c6c6, #0099ff);
   background: #0099ff;
   border-top-color: #0099ff;
   color: #ccc;
   }
.ebbtn a:active {
   border-top-color: #0099ff;
   background: #0099ff;
   }

7.Cool Ease Button

This button is a simple but very effective button which I personally use on this blog. You may have seen all these demo buttons and may have like the same. Its for you! This button also uses advanced transitional properties from CSS3. Therefore more futureproof.


Cool Ease Button Demo

/*CSS For backkground effects button with border */
.ebbtn a{
background: #333333;
padding: 5px 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); -webkit-transition: all 1.0s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; display: inline-block; color: #FFFFFF; font-size: 12px; font-family: Georgia, serif; text-decoration: none; vertical-align: middle;}
.ebbtn a:hover {background: #408DD2;}

8.Beautiful Gradient Button

This is the one button which I like the most. I would like to give credits to JankoatWarpSpeed for this button for ripping off CSS from him. Its hard to describe this button in words. You yourself have a look at this.


Beautiful Button with Gradient Demo

/*CSS for Beautiful Button with Gradient*/
.ebbtn a {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    padding: 5px 10px;
    background: #f78d1d;
    text-decoration:none;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.ebbtn a:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.ebbtn a:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Have Your say about these buttons. Do you like them? or should I work on with more gradient or border effects. I have put in a lot of efforts for these buttons day and night, So you may share and modify my work. But please do give a Dofollow backlink to this post as a small token of satisfaction that you are having.

Hey, Wait! Have  a look at my new series of css3 buttons. They are much juicy than these!!!

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