Beautiful CSS Buttons (Download and Demo) for Blogger

css-buttons-blogger
If you are running a widget or template blog on Blogger, then you must add these beautiful CSS round buttons to it. After adding these buttons, you can place beautiful link buttons for demos and download of templates and widgets as well as for external links. This package of multi-color CSS buttons include 6 different and beautiful color effects which include blue, orange, red, dark, gray and light green.

How to Add CSS Multi Color Buttons to Blogger

1. Log in to Blogger dashboard and select your blog
2. Navigate to Template section and edit its HTML (View screenshot)
3. Press Ctrl+F, find ]]></b:skin> and paste below provided code just above ]]></b:skin>
.SRB{ background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.SRB a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

.SRB a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }

.SRB a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }

.SRB a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }

.SRB a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }

.SRB a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }

.SRB a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }

.SRB a:hover, .SRB:hover { color: #fff; opacity: .7 }
4. Save your template.
5. Now to add these buttons to your posts and pages, use below codes in post/page editor by replacing highlighted values (# with link and Button Text with the text which you want to make appear on the button). Make it sure that you paste the code in HTML mode while composing your post or page. (View screenshot)

Button Text
<span class="SRB"><a class="green" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Button Text
<span class="SRB"><a class="orange" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Button Text
<span class="SRB"><a class="red" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Button Text
<span class="SRB"><a class="gray" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Botton Text
<span class="SRB"><a class="dark" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Button Text
<span class="SRB"><a class="blue" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Need more help in adding these buttons to your blog? Just leave a comment below.

Labels: ,