Add Google Search Styled Buttons In Blogger ~ The Next Generation Blog

Home » blogger_tricks » Add Google Search Styled Buttons In Blogger

Add Google Search Styled Buttons In Blogger

Hey friends, today, I am going to tell you a way to add google styled buttons in your blogger blog. Hope it will be helpful to make your blog more attractive. Let's begin:
> Login to your blogger account.
> Go to Template > Edit HTML.
> Find the code ]]></b:skin> and just above it, copy and paste this 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}

> Now save the template.
> Now while typing the blogpost, just go in html editor mode and then add this code where you want to show the button:

<button class="ui-button"><a href="YOUR TARGET LINK" target="_blank">YOUR BUTTON TEXT</a></button>

> Enjoy. Keep visiting for more tips and tricks.