Buttons 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 threesizes, small, medium and large. 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 template2. 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 Template2 Click Edit HTML
3 Search for this code ]]>
4 Just above it paste the following CSS code
/*-------Buttons Shortcode---by-------www.rtricks.com--<-don its="" remove="" request---="" span="" t="" this="">
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}
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
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 |
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"]"> Download
fa-download
[/button]OUTPUT
- Insert download link inside the src attribute. Replace http://www.example.comwith your URL.
- Replace fa-download with your FontAwesome Icon class.
Blogger Comment