Friday, May 27, 2011

CSS Buttons With Hover Effects

23 comments
CSSHello 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

Comments

23 comments to "CSS Buttons With Hover Effects"

silent screamer said... September 9, 2011 at 8:57 AM

Not work! Help me.

Amit M B said... September 9, 2011 at 6:23 PM

Would you please elaborate? Tell me what did not work for you? i'll help out

silent screamer said... September 16, 2011 at 7:56 PM

@Amit M B
Now, it's work. Nice. Walla! :)

Mohit said... March 28, 2012 at 9:56 AM

Thanks very much for the tutorial.

I understool the CSS part. Kindly tell me which url should I enter in the html code

Mohit said... March 28, 2012 at 10:22 AM

I got it now, thanks very much.

utsav said... May 31, 2012 at 10:47 AM

nice share

Knight said... June 2, 2012 at 12:46 AM

thanks..nice tutorial.

Franky said... June 2, 2012 at 12:49 AM

What code did you use for your su, facebook and twitter buttons?

Unknown said... August 24, 2012 at 8:55 PM

Thank you very much for this great post. It helped me...
Thanks.

Unknown said... January 22, 2013 at 5:11 PM

Nice share...i will put in my blog www.filmmediafire.com

Vivek Moyal said... January 24, 2013 at 9:25 PM

Your above buttons look same please check...

Anonymous said... January 30, 2013 at 8:32 PM

Please let me know if you're looking for a writer for your weblog. You have some really great articles and I believe I would be a good asset. If you ever want to take some of the load off, I'd
absolutely love to write some articles for your blog in exchange for
a link back to mine. Please blast me an e-mail if interested.
Kudos!
My blog - vakantiehuisje

Anonymous said... April 21, 2013 at 7:25 AM

Superb, what a webpage it is! This weblog presents helpful data
to us, keep it up.

my web page: germany

Anonymous said... May 21, 2013 at 11:00 AM

A fascinating discussion is worth comment. I believe that you
need to write more about this topic, it might not be a taboo subject but
generally people don't speak about such topics. To the next! All the best!!

Also visit my web blog vacature zorg arnhem

Anonymous said... May 21, 2013 at 8:55 PM

Hello Dear, are you really visiting this site daily,
if so afterward you will absolutely obtain good experience.


Feel free to visit my blog post http://vakantieparkenfrankrijk.wordpress.com

Anonymous said... June 5, 2013 at 4:24 AM

Nice post. I learn something totally new and challenging on sites I stumbleupon every day.
It will always be exciting to read through articles from other authors and use a little something from other websites.


My web-site: france travel advice gov

Anonymous said... June 7, 2013 at 2:34 PM

If you desire to grow your experience just keep visiting this web site and be updated with the latest
information posted here.

my blog :: vakantiehuizen huren

Anonymous said... June 7, 2013 at 2:51 PM

I needed to thank you for this good read!!
I certainly loved every bit of it. I have got you saved as a favorite
to check out new things you post…

My web site - web site ()

Anonymous said... June 8, 2013 at 9:54 AM

Hello every one, here every one is sharing these
experience, therefore it's good to read this webpage, and I used to go to see this weblog every day.

My blog ... vakantiehuis frankrijk

Anonymous said... June 8, 2013 at 9:56 AM

Hello to every one, as I am genuinely keen of reading this website's post to be updated regularly. It carries nice stuff.

Here is my web site; luxe vakantiehuizen

Anonymous said... June 8, 2013 at 9:19 PM

I pay a visit each day a few websites and websites to read posts, but this
web site presents feature based posts.

Feel free to surf to my web-site ... vakantiehuisjes frankrijk

Anonymous said... June 9, 2013 at 4:03 AM

Please let me know if you're looking for a article author for your site. You have some really good posts and I believe I would be a good asset. If you ever want to take some of the load off, I'd love
to write some material for your blog in exchange for a link
back to mine. Please shoot me an e-mail if interested.

Thanks!

my blog post :: particuliere vakantiehuizen :: ::

Anonymous said... June 9, 2013 at 7:03 AM

you are in point of fact a good webmaster. The site loading velocity is incredible.

It sort of feels that you're doing any unique trick. Also, The contents are masterpiece. you've performed a
excellent activity on this matter!

Feel free to visit my homepage :: vakantievilla zuid frankrijk

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 |