Here I present you Buttons which Bloggers often need in there blogs to redirect to demo or download page. These buttons make your simple links more attractive. You can see the the demo by clicking on the below button.
These button use CSS3 so old browsers like IE would not support it. These buttons work on almost all major browsers. Before starting do not forget to make a backup of your template. So here is the tutorial for adding these buttons to your blogger blog.
First of all we have to add CSS. Copy the below CSS code and paste it just above ]]></b:skin>
After adding this code Save your templet.
First of all we have to add CSS. Copy the below CSS code and paste it just above ]]></b:skin>
.button {display: inline-block;position: relative;padding: 10px 20px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;text-decoration: none!important;text-shadow: 1px 1px 0 rgba(255,255,255,0.4);font: 15px Calibri,Arial,sans-serif;white-space: nowrap;vertical-align: baseline;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png');background-position: bottom left;background-position: bottom left,top right,0 0,0 0;background-repeat: no-repeat;background-clip: border-box;-webkit-box-shadow: 0 0 1px #fff inset;-moz-box-shadow: 0 0 1px #fff inset;box-shadow: 0 0 1px #fff inset;-webkit-transition: background-position 1s;-moz-transition: background-position 1s;transition: background-position 1s;cursor: pointer;}
.button:hover {background-position: top left;background-position: top left,bottom right,0 0,0 0;}
.button:active {bottom: -1px;}
.button.big {font-size: 30px;}
.button.medium {font-size: 18px;}
.button.small {font-size: 13px;}
.blue.button {border: 1px solid #84acc3!important;color: #0f4b6d!important;background-color: #48b5f2;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1) ),to(rgba(89,208,244,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#4fbbf7),to(#3faeeb));}
.blue.button:hover {background-color: #63c7fe;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1) ),to(rgba(109,217,250,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#63c7fe),to(#58bef7));}
.green.button {border: 1px solid #96a37b!important;color: #345903!important;background-color: #79be1e;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27,#74b317);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(162,211,30,1) ),to(rgba(162,211,30,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#82cc27),to(#74b317));}
.green.button:hover {background-color: #89d228;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31,#7fc01e);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(183,229,45,1) ),to(rgba(183,229,45,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#90de31),to(#7fc01e));}
.orange.button {border: 1px solid #bea280!important;color: #693e0a!important;background-color: #e38d27;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f,#d4821f);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(232,189,45,1) ),to(rgba(232,189,45,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#f1982f),to(#d4821f));}
.orange.button:hover {background-color: #ec9732;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746,#e18f2b);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(241,192,52,1) ),to(rgba(241,192,52,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#f9a746),to(#e18f2b));}
.gray.button {border: 1px solid #a5a5a5!important;color: #525252!important;background-color: #a9adb1;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca,#92989c);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(197,199,202,1) ),to(rgba(197,199,202,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#c5c7ca),to(#92989c));}
.gray.button:hover {background-color: #b6bbc0;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6,#9fa5a9);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(202,205,208,1) ),to(rgba(202,205,208,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#d1d3d6),to(#9fa5a9));}
After adding this code Save your templet.
HTML For Large Size button
<a class="button big blue" href="LINK">LINKNAME</a>
<a class="button big green" href="LINK">LINKNAME</a>
<a class="button big orange" href="LINK">LINKNAME</a>
<a class="button big gray" href="LINK">LINKNAME</a>
HTML For Medium Size button
<a class="button blue medium" href="LINK">LINKNAME</a>
<a class="button green medium" href="LINK">LINKNAME</a>
<a class="button orange medium" href="LINK">LINKNAME</a>
<a class="button gray medium" href="LINK">LINKNAME</a>
HTML For Small Size button
<a class="button small blue" href="LINK">LINKNAME</a>
<a class="button small green" href="LINK">LINKNAME</a>
<a class="button small orange" href="LINK">LINKNAME</a>
<a class="button small gray" href="LINK">LINKNAME</a>
Repalce LINK with your desired like and LINKNAME with the text you want to be written on the button.
That's it. Its easy and simple to use if you face any problem just drop a comment below.
<<*********************************************************>>
I hope you enjoy with this widgets and useful for you. If you face any problem then directly interact with the official website and directly ask the developers for this widgets for solution commenting there.
No comments :
Post a Comment