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.

CSS Download and Demo Buttons for Blogger and WordPress

5 min read

Sometimes, you need to put external links for downloads of files and for showing the demos of different themes. Traditional links don’t attract the attention of your visitors, but when you place beautiful CSS buttons, they not only attract your visitors’ attention, but they make your blog beautiful also. I have extracted the CSS code from my current WordPress theme for adding attractive download and demo buttons on your blog. Using this CSS code, you can place multiple attractive buttons for links on your posts and pages. Here is the demo for these buttons:

[button size=”small” color=”red”]Red Small[/button][button size=”small” color=”green”]Green Small[/button][button size=”small” color=”blue”]Blue Small[/button][button size=”small” color=”black”]Black Small[/button][button size=”small” color=”grey”]Grey Small[/button][button size=”small” color=”white”]White Small[/button][button size=”small” color=”pink”]Pink Small[/button][button size=”small” color=”purple”]Purple Small[/button]

[button size=”medium” color=”red”]Red Medium[/button][button size=”medium” color=”green”]Green Medium[/button][button size=”medium” color=”blue”]Blue Medium[/button][button size=”medium” color=”black”]Black Medium[/button][button size=”medium” color=”grey”]Grey Medium[/button][button size=”medium” color=”white”]White Medium[/button][button size=”medium” color=”pink”]Pink Medium[/button][button size=”medium” color=”purple”]Purple Medium[/button]

[button size=”big” color=”red”]Red Big[/button][button size=”big” color=”green”]Green Big[/button][button size=”big” color=”blue”]Blue Big[/button][button size=”big” color=”black”]Black Big[/button][button size=”big” color=”grey”]Grey Big[/button][button size=”big” color=”white”]White Big[/button][button size=”big” color=”pink”]Pink Big[/button][button size=”big” color=”purple”]Purple Big[/button]

Liked the buttons? Here is the tutorial to add these buttons to your Blogger or WordPress posts and pages.

Adding CSS Buttons to Blogger and WP

For Blogger:

  1. Visit Blogger dashboard and choose your blog to which you need to add these buttons
  2. Scroll down to template on left sidebar and edit its HTML
  3. Find ]]></b:skin> and paste below provided code just above ]]></b:skin>
a.button{border: 1px solid #a3a3a3;background: #d4d4d4;height: 25px;line-height:25px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;color: white;display:inline-block;    margin:0 5px 20px;    padding:0 10px;    position:relative;font-size:12px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),inset 0 1px 0 rgba(255, 255, 255, 0.5),inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: background .40s;-moz-transition: background .40s; -o-transition: background .40s;transition: background .40s;
    background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#d4d4d4),color-stop(100%,#c7c7c7));background: -webkit-linear-gradient(top,#d4d4d4 0,#c7c7c7 100%);background: -moz-linear-gradient(top,#d4d4d4 0,#c7c7c7 100%);background: -o-linear-gradient(top,#d4d4d4 0,#c7c7c7 100%);    background: -ms-linear-gradient(top,#d4d4d4 0,#c7c7c7 100%);background: linear-gradient(top,#d4d4d4 0,#c7c7c7 100%);
}
a.button:hover{    background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#d8d6d6),color-stop(100%,#cdcdcd));background: -webkit-linear-gradient(top,#d8d6d6 0,#cdcdcd 100%);background: -moz-linear-gradient(top,#d8d6d6 0,#cdcdcd 100%);background: -o-linear-gradient(top,#d8d6d6 0,#cdcdcd 100%);background: -ms-linear-gradient(top,#d8d6d6 0,#cdcdcd 100%);background: linear-gradient(top,#d8d6d6 0,#cdcdcd 100%);}
a.button:active{ top:1px;} 
a.button.red{border: 1px solid #B63540;background: #ED596A;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#F77087),color-stop(100%,#E3414D));background: -webkit-linear-gradient(top,#F77087 0,#E3414D 100%);background: -moz-linear-gradient(top,#F77087 0,#E3414D 100%);background: -o-linear-gradient(top,#F77087 0,#E3414D 100%);background: -ms-linear-gradient(top,#F77087 0,#E3414D 100%);background: linear-gradient(top,#F77087 0,#E3414D 100%);}
a.button.red:hover{background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#F8889B),color-stop(100%,#E65762));    background: -webkit-linear-gradient(top,#F8889B 0,#E65762 100%);background: -moz-linear-gradient(top,#F8889B 0,#E65762 100%);background: -o-linear-gradient(top,#F8889B 0,#E65762 100%);background: -ms-linear-gradient(top,#F8889B 0,#E65762 100%);background: linear-gradient(top,#F8889B 0,#E65762 100%);}
a.button.green{border: 1px solid #5E8C22;background: #89C03E;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#A8D34E),color-stop(100%,#6AAD2D));background: -webkit-linear-gradient(top,#A8D34E 0,#6AAD2D 100%);background: -moz-linear-gradient(top,#A8D34E 0,#6AAD2D 100%);background: -o-linear-gradient(top,#A8D34E 0,#6AAD2D 100%);background: -ms-linear-gradient(top,#A8D34E 0,#6AAD2D 100%);background: linear-gradient(top,#A8D34E 0,#6AAD2D 100%);}
a.button.green:hover{ background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#B2D862),color-stop(100%,#76C132));background: -webkit-linear-gradient(top,#B2D862 0,#76C132 100%);background: -moz-linear-gradient(top,#B2D862 0,#76C132 100%);background: -o-linear-gradient(top,#B2D862 0,#76C132 100%);background: -ms-linear-gradient(top,#B2D862 0,#76C132 100%);background: linear-gradient(top,#B2D862 0,#76C132 100%);}
a.button.blue{ border: 1px solid #1e638b;background: #00a2ff;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#00a2ff),color-stop(100%,#028edf));background: -webkit-linear-gradient(top,#00a2ff 0,#028edf 100%);background: -moz-linear-gradient(top,#00a2ff 0,#028edf 100%);background: -o-linear-gradient(top,#00a2ff 0,#028edf 100%);background: -ms-linear-gradient(top,#00a2ff 0,#028edf 100%);background: linear-gradient(top,#00a2ff 0,#028edf 100%);}
a.button.blue:hover{ background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#3cb6fc),color-stop(100%,#31a6ea));background: -webkit-linear-gradient(top,#3cb6fc 0,#31a6ea 100%);background: -moz-linear-gradient(top,#3cb6fc 0,#31a6ea 100%);background: -o-linear-gradient(top,#3cb6fc 0,#31a6ea 100%);background: -ms-linear-gradient(top,#3cb6fc 0,#31a6ea 100%);background: linear-gradient(top,#3cb6fc 0,#31a6ea 100%);}
a.button.orange{ border: 1px solid #be8a2b;background: #FFA500 ;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#FFA500),color-stop(100%,#ed9900));background: -webkit-linear-gradient(top,#FFA500 0,#ed9900 100%);background: -moz-linear-gradient(top,#FFA500 0,#ed9900 100%);background: -o-linear-gradient(top,#FFA500 0,#ed9900 100%);background: -ms-linear-gradient(top,#FFA500 0,#ed9900 100%);background: linear-gradient(top,#FFA500 0,#ed9900 100%);}
a.button.orange:hover{ background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ffb93a),color-stop(100%,#f3ab26));background: -webkit-linear-gradient(top,#ffb93a 0,#f3ab26 100%);background: -moz-linear-gradient(top,#ffb93a 0,#f3ab26 100%);background: -o-linear-gradient(top,#ffb93a 0,#f3ab26 100%);background: -ms-linear-gradient(top,#ffb93a 0,#f3ab26 100%);background: linear-gradient(top,#ffb93a0,#f3ab26 100%);}
a.button.pink{ border: 1px solid #cc198b;background: #ff00a2;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ff00a2),color-stop(100%,#ed0097));background: -webkit-linear-gradient(top,#ff00a2 0,#ed0097 100%);background: -moz-linear-gradient(top,#ff00a2 0,#ed0097 100%);background: -o-linear-gradient(top,#ff00a2 0,#ed0097 100%);background: -ms-linear-gradient(top,#ff00a2 0,#ed0097 100%);    background: linear-gradient(top,#ff00a2 0,#ed0097 100%);}
a.button.pink:hover{ background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ff6cc9),color-stop(100%,#ea51b2));background: -webkit-linear-gradient(top,#ff6cc9 0,#ea51b2 100%);background: -moz-linear-gradient(top,#ff6cc9 0,#ea51b2 100%);background: -o-linear-gradient(top,#ff6cc9 0,#ea51b2 100%);background: -ms-linear-gradient(top,#ff6cc9 0,#ea51b2 100%);background: linear-gradient(top,#ff6cc9,#ea51b2 100%);    }
a.button.purple{ border: 1px solid #833083;background: #d700d7;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#d700d7),color-stop(100%,#b000b0));background: -webkit-linear-gradient(top,#d700d7 0,#b000b0 100%);background: -moz-linear-gradient(top,#d700d7 0,#b000b0 100%);background: -o-linear-gradient(top,#d700d7 0,#b000b0 100%);background: -ms-linear-gradient(top,#d700d7 0,#b000b0 100%);    background: linear-gradient(top,#d700d7 0,#b000b0 100%);}
a.button.purple:hover{background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#f969f9),color-stop(100%,#c302c3));background: -webkit-linear-gradient(top,#f969f9 0,#c302c3 100%);background: -moz-linear-gradient(top,#f969f9 0,#c302c3 100%);    background: -o-linear-gradient(top,#f969f9 0,#c302c3 100%);    background: -ms-linear-gradient(top,#f969f9 0,#c302c3 100%);background: linear-gradient(top,#f969f9,#c302c3 100%);}
a.button.black{ border: 1px solid #000;background: #434343;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#434343),color-stop(100%,#232323));background: -webkit-linear-gradient(top,#434343 0,#232323 100%);background: -moz-linear-gradient(top,#434343 0,#232323 100%);background: -o-linear-gradient(top,#434343 0,#232323 100%);background: -ms-linear-gradient(top,#434343 0,#232323 100%);background: linear-gradient(top,#434343 0,#232323 100%);}
a.button.black:hover{ background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#5a5959),color-stop(100%,#3d3d3d));background: -webkit-linear-gradient(top,#5a5959 0,#3d3d3d 100%);background: -moz-linear-gradient(top,#5a5959 0,#3d3d3d 100%);background: -o-linear-gradient(top,#5a5959 0,#3d3d3d 100%);background: -ms-linear-gradient(top,#5a5959 0,#3d3d3d 100%);background: linear-gradient(top,#5a5959,#3d3d3d 100%);}
a.button.white{ border: 1px solid #d9d9d9;background: #fbfbfb;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fbfbfb),color-stop(100%,#eee ));background: -webkit-linear-gradient(top,#fbfbfb 0,#eee 100%);background: -moz-linear-gradient(top,#fbfbfb 0,#eee 100%);    background: -o-linear-gradient(top,#fbfbfb 0,#eee 100%);background: -ms-linear-gradient(top,#fbfbfb 0,#eee 100%);background: linear-gradient(top,#fbfbfb 0,#eee 100%);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),inset 0 1px 0 rgba(255, 255, 255, 0.5);color:#000;text-shadow: 0 1px 0 #FFF;}
a.button.white:hover{ background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#FFF),color-stop(100%,#f8f8f8));    background: -webkit-linear-gradient(top,#FFF 0,#f8f8f8 100%);background: -moz-linear-gradient(top,#FFF 0,#f8f8f8 100%);background: -o-linear-gradient(top,#FFF 0,#f8f8f8 100%);background: -ms-linear-gradient(top,#FFF 0,#f8f8f8 100%);background: linear-gradient(top,#FFF ,#f8f8f8 100%);}
a.button.medium{ height:35px; line-height:35px; font-size:16px; padding:0 15px;}
a.button.big{ height:55px; line-height:55px; font-size:22px; padding:0 25px;}

Save your template after adding the code.

For WordPress:

  1. Go to your WordPress dashboard
  2. Scroll down and hover mouse pointer over Appearance and select Editor from the appeared menu
  3. Add above provided code at the end of style.css file and save it and then close editor

Adding CSS Buttons to Posts/Pages

After adding the above provided CSS code to your Blogger or WordPress blog, now its time to add these buttons to posts and pages. To add these buttons for links, give link a class with specified values.  You need to switch to HTML mode in Blogger editor and to Text mode in WordPress post editor. Below is an example:

<a href="https://supportivehands.net" target="_blank" class="button [highlight]big blue[/highlight]">Blogging Tips</a>

This code will result in below button appearance:

Customizations:

You have three size and eight color options to select from. For putting buttons of your choice, modify the last two values in class attribute. Keep the first value static which is “button”. Don’t change it. If you want to place a medium green button, just change the last values big and blue to medium and green. A green medium button will appear for the link.

I hope you understood how to add these beautiful CSS buttons for links on your blog. If you are still confused on how to add these buttons, don’t hesitate to ask in comments.

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

5 Top Plugins to Enable Google Translate on WordPress…

We all know that English is the universal language of the world and almost all English blogs don’t prefer to use Google Translate or...
Rehmat Alam
1 min read

How to Add Free Flash Polls and Surveys to…

Although there is a poll creation plugin available for WordPress and Blogger also lets adding a simple poll gadget from within its interface, but...
Rehmat Alam
1 min read

2 Replies to “CSS Download and Demo Buttons for Blogger and WordPress”

  1. Admin! can you please tell me

    How to make demos for blogs for any type of demonstration ?

Leave a Reply

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