Rehmat Alam A blogger who has fallen in love with coding! Here at SupportiveHands.net, I share things that relate to coding, servers, E-marketing, and other related fields.

Beautiful CSS Buttons (Download and Demo) for Blogger

2 min read

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

css-buttons-blogger

1. Log in to Blogger dashboard and select your blog

2. Navigate to Template section and edit its HTML

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.

For Green Button:

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

For Orange Button:

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

For Red Button:

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

For Gray Button:

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

For Dark Button:

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

For Blue Button:

<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.

Rehmat Alam A blogger who has fallen in love with coding! Here at SupportiveHands.net, I share things that relate to coding, servers, E-marketing, and other related fields.

Facebook Like Widget for Websites, WordPress and Blogger

The Facebook Like widget, which I have brought for you today is unique and coolest among its kind of widgets and plugins and you...
Rehmat Alam
1 min read

How to Add “Contact Me” Form and Sticky Button…

Google’s Blogger is though providing a brilliant free blog hosting, but some limitations are also there on Blogger. One of these limitations is, Blogger...
Rehmat Alam
2 min read

Attractive Floating Social Media Buttons Widget for Blogger

Are you searching for a social media profiles widget for your blogspot blog? If yes, then my recommended social media widget will surely make...
Rehmat Alam
2 min read

Leave a Reply

Your email address will not be published. Required fields are marked *