--> Buttons Shortcode - Create CSS3 Buttons in Blogger! | Experience Lab - Online business creation and development guide for bloggers and startups

Buttons Shortcode - Create CSS3 Buttons in Blogger!

Buttons shortcode is another exciting element of Blogger Shortcode Plugin which is a one line textual code that you can insert anywhere on ...

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! =>

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Buttons Shortcode - Create CSS3 Buttons in Blogger!
Buttons Shortcode - Create CSS3 Buttons in Blogger!
http://lh3.googleusercontent.com/-vIT2N0lkxCY/VU9ONJ78mII/AAAAAAAAOzM/khkjIyDK1yM/image%25255B15%25255D.png?imgmax=800
http://lh3.googleusercontent.com/-vIT2N0lkxCY/VU9ONJ78mII/AAAAAAAAOzM/khkjIyDK1yM/s72-c/image%25255B15%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2015/05/buttons-shortcode-create-css3-buttons.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2015/05/buttons-shortcode-create-css3-buttons.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy