Buttons Shortcode - Create CSS3 Buttons in Blogger!

Buttons Shortcode for bloggerButtons shortcode is another exciting element of Blogger Shortcode Plugin which is a one line textual code that you can insert anywhere on your blogger blog to display colorful buttons with links and icons. You can add fontAwesome icons and links to your buttons and choose any gradient background color you want! You can also create clickable social media sharing buttons or follow buttons. The buttons come in three sizes, small, medium and large. You can also decide when to nofollow a link in the button. The buttons can be added inside blog posts, comments and sidebar widgets, almost anywhere. The buttons are design Compatible with all major browsers and of course responsive. Lets see them in action!


1. Install Blogger Shortcode Plugin

In order to use Buttons shortcode you must first install the shortcode plugin for your blogger blog by following 7 easy steps shared on the link below:

Skip installing it if you have already added it in your blogspot template

2. Add Button Color Themes

By default I have created 9 Color themes for the button shortcode using CSS3 gradient backgrounds. Lets first add these styles inside your template.

1 Go To Blogger > Template > Backup your Template

2 Click Edit HTML

3 Search for this code ]]></b:skin>

4 Just above it paste the following CSS code

/*-------Buttons Shortcode---------------- */

    a.sc-button i{padding-right:3px}a.sc-button.large{padding:8px 20px;font-size:18px}a.sc-button.medium{padding:5px 14px;font-size:15px}a.sc-button.small{padding:1px 6px;font-size:12px}a.sc-button{padding:4px 14px;margin-bottom:0;font-size:14px;display:inline-block;line-height:20px;text-align:center;vertical-align:middle;cursor:pointer;color:#333;text-shadow:0 1px 1px rgba(255,255,255,0.75);background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(to bottom,#fff,#e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe5e5e5',GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);border:1px solid #bbb;border-bottom-color:#a2a2a2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);text-decoration:none;font-family:oswald}a.sc-button:hover{color:#333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position .3s linear;-moz-transition:background-position .3s linear;-o-transition:background-position .3s linear;transition:background-position .3s linear}a.sc-button.green{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#84FF00;background-image:-moz-linear-gradient(top,#84FF00,#58AA00);background-image:-webkit-gradient(linear,0 0,0 100%,from(#a7be2c),to(#95aa27));background-image:-webkit-linear-gradient(top,#84FF00,#58AA00);background-image:-o-linear-gradient(top,#84FF00,#58AA00);background-image:linear-gradient(to bottom,#84FF00,#58AA00);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#84FF00',endColorstr='#58AA00',GradientType=0);border-color:#95aa27 #95aa27 #5e6c19;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.green:hover{background-color:#58AA00}a.sc-button.blue{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#49afcd;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.blue:hover{background-color:#2f96b4}a.sc-button.purple{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#FD9CF8;background-image:-moz-linear-gradient(top,#FD9CF8,#CE00CF);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));background-image:-webkit-linear-gradient(top,#FD9CF8,#CE00CF);background-image:-o-linear-gradient(top,#FD9CF8,#CE00CF);background-image:linear-gradient(to bottom,#FD9CF8,#CE00CF);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FD9CF8',endColorstr='#CE00CF',GradientType=0);border-color:#CE00CF #CE00CF #FD9CF8;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.purple:hover{background-color:#CE00CF}a.sc-button.orange{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#faa732;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(to bottom,#fbb450,#f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffab44f',endColorstr='#fff89406',GradientType=0);border-color:#f89406 #f89406 #ad6704;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.orange:hover{background-color:#f89406}a.sc-button.red{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#FE1A0E;background-image:-moz-linear-gradient(top,#FE1A0E,#AC0905);background-image:-webkit-gradient(linear,0 0,0 100%,from(#FE1A0E),to(#AC0905));background-image:-webkit-linear-gradient(top,#FE1A0E,#AC0905);background-image:-o-linear-gradient(top,#FE1A0E,#AC0905);background-image:linear-gradient(to bottom,#FE1A0E,#AC0905);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FE1A0E',endColorstr='#AC0905',GradientType=0);border-color:#bd362f #bd362f #802420;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.red:hover{background-color:#AC0905}a.sc-button.black{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#363636;background-image:-moz-linear-gradient(top,#444,#222);background-image:-webkit-gradient(linear,0 0,0 100%,from(#444),to(#222));background-image:-webkit-linear-gradient(top,#444,#222);background-image:-o-linear-gradient(top,#444,#222);background-image:linear-gradient(to bottom,#444,#222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444',endColorstr='#ff222222',GradientType=0);border-color:#222 #222 #000;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.black:hover{background-color:#222}
    a.sc-button.brown{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#FEAA33;background-image:-moz-linear-gradient(top,#FEAA33,#9F5E02);background-image:-webkit-gradient(linear,0 0,0 100%,from(#FEAA33),to(#9F5E02));background-image:-webkit-linear-gradient(top,#FEAA33,#9F5E02);background-image:-o-linear-gradient(top,#FEAA33,#9F5E02);background-image:linear-gradient(to bottom,#FEAA33,#9F5E02);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEAA33',endColorstr='#9F5E02',GradientType=0);border-color:#9F5E02 #9F5E02 #FEAA33;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.brown:hover{background-color:#9F5E02}
a.sc-button.fb{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#6080C6;background-image:-moz-linear-gradient(top,#6080C6,#3a5795);background-image:-webkit-gradient(linear,0 0,0 100%,from(#6080C6),to(#3a5795));background-image:-webkit-linear-gradient(top,#6080C6,#3a5795);background-image:-o-linear-gradient(top,#6080C6,#3a5795);background-image:linear-gradient(to bottom,#6080C6,#3a5795);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6080C6',endColorstr='#3a5795',GradientType=0);border-color:#3a5795 #3a5795 #6080C6;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.fb:hover{background-color:#3a5795}


5 Save your template and you are all done with template editing!

You can add a theme of your choice too if you wish. Do ask us on our forum if you wish to create a button with your custom color choice.

3. Finally Start Adding Buttons using a Shortcode!

To add a button inside your post, comments or sidebar HTML/JavaScript widgets, use the shortcode below

[button]Your Title[/button]

OUTPUT:

default button 

Customize the Button!

Following is the complete list of attributes supported by Buttons Shortcode

Attribute Definition
src Insert button URL/Link here
color Mentions Button Color. Options: red, brown, blue, green, purple, black, orange, fb
size Adjusts the size of the button. Options: small, medium, large 
rel Decides whether to add a nofollow to a link or not


Now lets suppose you want to create a Download button with a Download icon, blue background and large size. Then you will use attributes inside shortcode in the following format.

[button size="large" color="blue" src="http://www.example.com"]
<i class="fa fa-download"></i> Download
[/button]

OUTPUT:

Download button shortcode

  • Insert download link inside the src attribute. Replace http://www.example.com with your URL.
  • Replace fa-download with your FontAwesome Icon class.

That simple! :)

Nofollow the Buttons!

Another exciting update we made to this button today (12th May 2015) is the option to decide whether you want to add a nofollow link attribute to the button or not. You may want to nofollow demo buttons and social media buttons and for that we have created for you the option to decide whether you want to flow your PageRank juice to a particle link or not. Whenever you want to tell robots that you are linking a site but you are not recommending it and neither you wish to pass your precious PR juice to it through a backlink, then simply add the rel attribute in the shortcode in this format:

[button rel="nofollow" src="http://www.example.com"]DEMO[/button]

If incase you want to recommend the link and pass your PR juice to it then simply don't bother adding any rel attribute.

Need Help?

Let us know if you need any further help. I hope this shortcode helps you add a new life to your blog and helps you add colorful buttons without worrying about adding complex piece of codes, just add install the blogger shortcode plugin on your blog and benefit from dozens of exciting web tools and widgets. Peace and blessings buddies! =>

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

20 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Thanks Mohammad! I was eagerly waiting for this Short Code. :)

    ReplyDelete
    Replies
    1. A pleasure dear Shivansh! I am so glad you liked it :)

      Delete
  2. Awesome ... Beautiful and attractive ..

    ReplyDelete
  3. It is very beautiful and attracting. You really are a wonderful blogger. Plz add Popular and most commented shortcode. Thank you so much.

    ReplyDelete
    Replies
    1. Thank you for the precious copliment.


      The most commented widget has already been created by us which you can easily add by reading this tutorial Most commented widget with comment count bubbles

      Shortcodes are often created for tools and widgets which are needed inside posts or comments


      Delete
  4. Now its very asey add a buttons in Blogger Like wordpress this plugin is veru useful to beginnners.Sir Please add a Shortcode for Facebook Comments and HTML 5 Audio Player sir

    ReplyDelete
    Replies
    1. Santhosh I will created a Soundcloud shortcode already for audio and will try to create one for HTML5 player as per your request.

      The facebook comments plugin have been added in our TO_DO list

      Delete
  5. I was trying to add the most Commented widget under to your shortcode multi tab but not allow this system under Multi-tab. It still work normally but I want to add it under multi tab. Plz help me

    ReplyDelete
    Replies
    1. I just added the Most Commented widget code inside the Tabs Shortcode and found it working just perfectly. See the image demo below! :)

      [img src="http://ask.mybloggertricks.com/uploads/default/766/ed84f64a6c1819bc.jpg"/]

      Delete
    2. The above is an example of image shortcode which is on its way! :)

      Delete
  6. Thanks a lot of. Finally I can be able to do it.

    ReplyDelete
  7. Hi mr. Mustafa,
    I Like your creativity and simplifying things to reduce lots of work around.
    Appreciated your efforts,

    This Code looks like a Huge/Heavy, Is it not effects to load time

    ReplyDelete
  8. Its nice ...but shows only plain text in my mobile browser(Android 4.4-Chrome Browser).

    ReplyDelete
  9. For thse of us using the default blogger mobile template for our blog, will the short code work in our mobile template?

    ReplyDelete
  10. Thanks for sharing this awesome
    Post

    ReplyDelete
  11. Bro, i followed the steps correctly but for some reason the button doesn't appear on my blog post. It just shows in the form of text. Any solutions, please?

    ReplyDelete
    Replies
    1. I had same error.
      It just shows this http://prntscr.com/db4tt9 when i paste code in widget.
      If i insert code in post, it appear.

      Delete
  12. DUDE WHERE CAN I PAY YOU? LEAVE YOU A TIP? THANK YOU SIR!

    ReplyDelete
  13. Hi,Mohammad..You have cool page.I love it.Thanks for sharing

    ReplyDelete