Wednesday, June 27, 2012

Cool Css Button With Hover Style For Blogger

This is Cool Css button. It include with cool
hover style.you can add this button any where
in your blog with this code.Follow these steps
to add it to your blog.


Demo

1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag


.hb-buttons{
background-color:#4b3f39;
font-family: 'Verdana', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
border-radius: 5px;
box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}

.hb-buttons:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}

.hb-buttons:before {
background-color:#322620;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYuQ1xChLzVaGeJXK9iWAGwanNdVE9f4Krx0xuxCVZQglkdXyv7hfp2MJycPYj7reDhqTHusd95r_LGG0nuz2CutxjyK1BqHpI2C-EyICEFI0210OHv5iQuDCTjLI729VTOZLSCxoWh84/h80/helper-blogger-right-arrow.png);
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
border-radius: 50%;
box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}

.hb-buttons:active::before {
top:50%;
margin-top:-12px;
box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

Now you can save your Template.
When you want to add it to your blog. Use Like below


<a href="YOUR LINK " class="hb-buttons">Button name</a>

When you want to add button use above link and.
* Replace YOUR LINK With your URL
*Replace Button name With any name you want.

Done, Cheers.

6 comments:

  1. hey i want to add new logo to my blog and i want to add the same hover effect to the logo like here at == http://besttheme.net/ == can you please help me out!!!

    ReplyDelete
  2. Hi your site has a lot of information i really like your all posts thanks for the class and quality work keep it up.

    ReplyDelete
  3. @Setem
    I can help you, contact me from contact page.

    @classified sites
    thanks you.

    ReplyDelete
  4. Very easy tutorial
    to see the results visit
    http://66robo.blogspot.in/2012/07/a-word-from-writer.html

    ReplyDelete
  5. I like the things that can be created with CSS3, for example nice buttons without using image file; so, the page loads faster is a few buttons:
    http://www.coursesweb.net/css/buttons-css_cs
    Only with css /css3.

    ReplyDelete