You might have seen button's used on Google search page, the gradient impact they're exploitation is solely appearance skilled and eye catching, well I found some impressive CSS codes collecting that very same impact ANd you'll be able to use it to feature buttons in your blogger post to travel to an alternative url and a few transfer link, thus you'll be able to check up on the operating demo below.
So if you wish the manner these buttons appears like then you'll simply 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.
0 comments:
Post a Comment