Google Style Button with Gradient Effect for Blogger


Best Movies Sites: TOP 10 MOVIE WEBSITES


Google Style Button for Blogger
If you set Google as your default home page, you might have already seen two Google styled buttons named Google Search and I’m Feeling Lucky. So in this tuto, sharing how you can implement these Google style button with gradient effect to your blog that seems simple yet professional. Its recreated in pure CSS and hasnt used any image, thats why youll be able to see the fast loading of this button even if you clear your browsers cache and cookies.


Before we dive into this tutorial, weve to check out this Google Search style button in action. So Ive provided a live demo just below. To see its gradient effect, hover your mouse point over below buttons. Thus youll be able to see its gradient effect that you seem exactly below search box in Google homepage.

Google style button demo



 Add Google Search Styled Buttons to your Blog
Do you like these buttons? Ive already mentioned in my previous post about the way of adding CSS code snippet to your blogger template. But for the guys, still not aware of this, follow the instructions given below carefully.

  • Go to Blogger Dashboard » Template
  • Backup your blogger Template before making any changes
  • Click on Edit HTML
  • Check Expand Widget Templates
  • Press Ctrl + F and search the code shown below

]]></b:skin>

Now copy & paste the below code right Above/Before ]]></b:skin> [use Ctrl+F to find the code].

button.ui-button {
    -webkit-border-radius: 2px;
    -webkit-box-align: stretch;
    -webkit-box-sizing: content-box;
    -webkit-transition: all .2s;
    -webkit-user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(whiteSmoke), to(#F1F1F1));
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 2px;
    box-sizing: content-box;
    color: #222;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    height: 27px;
    line-height: 26px;
    margin: 0;
    padding: 0 10px;
    position: relative;
    text-align: center;
    vertical-align: middle;
}
button.ui-button:hover {
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    -webkit-transition: all 0;
    background: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#F1F1F1));
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    color: #222;
    text-decoration: none;
}

Please note: You can easily fiddle with the above CSS code snippet to change the button font, weight, height, hover shadow and more, only if you know a little bit of CSS. And if youre not able, ask your needs via comment.

Preview your blogger template and unless any error occurred click on Save template and youre successfully added the skin of Google styled button. You can use the following HTML code snippet to add this button to your blog or blog post.

<button class="ui-button"><a href="http://www.example.com"
target="_blank">Button Text</a></button>

Also see: Expandable Button Created in CSS for Blogger

Important: You can straightforwardly add more buttons with different links in addition to texts, simply replace http://www.example.com with your link URL and  Button Text with your own text to display. The dimension of this button adjusts automatically according to the text.