How to Add Awesome Google Styled Button in Blogger

You might have seen button's used on Google search page, the gradient effect they are using is simply looks professional and eye catching, well I found some awesome CSS codes compiling that same effect and you can use it to add buttons in your blogger post to go to an other URL and some download link, so you can check out the working demo below.

So if you like the way these buttons looks like then you can easily follow below tutorial and add these buttons to your blogger blog.


1. Open Blogger –> Template –> Edit HTML.
2. Press Ctrl + F and search for ]]></b:skin> tag & add below code above it.

button.rnbutton{-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.rnbutton: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}

3. Now press Save Template and your styles for this button are added.
4. Now when ever you are creating any post and want to add this button just add below code in your posts Edit HTML section.

<button class="rn-button">This is a button</button>

<button class="rn-button"><a href="http://www.example.com" target="_blank">This is a button</a></button>

4. Now you can change the text and you can add link if you want too.
5. That's it now publish your post and you will see this awesome button loaded in your post's.