10 February 2014

How To Add Buttons To Blogger Posts?

20:38  , ,  


Add buttons to blogger posts
Buttons helps you to add links in an attractive and convenient way.It also helps the visitor to quickly find the link without reading the whole post.Moreover it gives a professional touch to your blog.Buttons can be made highly attractive with CSS which forces the user to click on it.This post will teach you how to add buttons to your blogger post.



How To Add Buttons To Blogger Post?

  1. Go to your Blogger Dashboard  > Templates > Customise > Advanced  > Add CSS
  2. Copy-Paste any of the below CSS code.
  3. Then copy the button code and paste it in your desired location.
  4. Switch to HTML view and replace the the button name.
  5. Then go back to Compose mode.
  6. Add the link to the button name text.{To make the button open the link in new tab simply check the open link in new tan option in link to option.

Different Styled CSS Buttons

Button 1
.styled-button-1 {
 -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 color:#333;
 background-color:#FA2;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border:none;
 font-family:'Helvetica Neue',Arial,sans-serif;
 font-size:16px;
 font-weight:700;
 height:32px;
 padding:4px 16px;
 text-shadow:#FE6 0 1px 0
}
Embed code:<a href="Link" class="styled-button-1">Button name</a>

Button 2
.styled-button-2 {
 -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
 border-bottom-color:#333;
 border:1px solid #61c4ea;
 background-color:#7cceee;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 color:#333;
 font-family:'Verdana',Arial,sans-serif;
 font-size:14px;
 text-shadow:#b2e2f5 0 1px 0;
 padding:5px
}

Embed code:<a href="Link" class="styled-button-2">Button name</a>

Button 3
.styled-button-3 {
 -webkit-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 background-color:#5B74A8;
 border:1px solid #29447E;
 font-family:'Lucida Grande',Tahoma,Verdana,Arial,sans-serif;
 font-size:12px;
 font-weight:700;
 padding:2px 6px;
 height:28px;
 color:#fff;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px
}

Embed code:<a href="Link" class="styled-button-3">Button name</a>

Button 4
.styled-button-4 {
 -webkit-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
 background-color:#EEE;
 border-radius:0;
 -webkit-border-radius:0;
 -moz-border-radius:0;
 border:1px solid #999;
 color:#666;
 font-family:'Lucida Grande',Tahoma,Verdana,Arial,Sans-serif;
 font-size:11px;
 font-weight:700;
 padding:2px 6px;
 height:28px
}

Embed code:<a href="Link" class="styled-button-4">Button name</a>

Button 5
.styled-button-5 {
 background-color:#ed8223;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:18px;
 line-height:30px;
 border-radius:20px;
 -webkit-border-radius:20px;
 -moz-border-radius:20px;
 border:0;
 text-shadow:#C17C3A 0 -1px 0;
 width:120px;
 height:32px
}

Embed code:<a href="Link" class="styled-button-5">Button name</a>

Button 6
.styled-button-6 {
 background:#f78096;
 background:-moz-linear-gradient(top,#f78096 0%,#f56778 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f78096),color-stop(100%,#f56778));
 background:-webkit-linear-gradient(top,#f78096 0%,#f56778 100%);
 background:-o-linear-gradient(top,#f78096 0%,#f56778 100%);
 background:-ms-linear-gradient(top,#f78096 0%,#f56778 100%);
 background:linear-gradient(top,#f78096 0%,#f56778 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f78096',endColorstr='#f78096',GradientType=0);
 padding:5px 4px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:12px;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border:1px solid #ae4553
}

Embed code:<a href="Link" class="styled-button-6">Button name</a>

Button 7
.styled-button-7 {
 background:#FF5DB1;
 background:-moz-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FF5DB1),color-stop(100%,#E94A86));
 background:-webkit-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background:-o-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background:-ms-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 background:linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF5DB1',endColorstr='#E94A86',GradientType=0);
 padding:5px 7px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:12px;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border:1px solid #E8124F
}

Embed code:<a href="Link" class="styled-button-7">Button name</a>

Button 8
.styled-button-9 {
 background:#00A0D1;
 background:-moz-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#00A0D1),color-stop(100%,#008DB8));
 background:-webkit-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background:-o-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background:-ms-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 background:linear-gradient(top,#00A0D1 0%,#008DB8 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00A0D1',endColorstr='#008DB8',GradientType=0);
 padding:8px 20px;
 color:#cfebf3;
 font-family:'Helvetica Neue',sans-serif;
 font-size:13px;
 border-radius:40px;
 -moz-border-radius:40px;
 -webkit-border-radius:40px;
 border:1px solid #095B7E
}

Embed code:<a href="Link" class="styled-button-9">Button name</a>

Button 9
.styled-button-11 {
 background:#FEDA71;
 background:-moz-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FEDA71),color-stop(100%,#FEBB49));
 background:-webkit-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background:-o-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background:-ms-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 background:linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEDA71',endColorstr='#FEBB49',GradientType=0);
 padding:8px 18px;
 color:#623F1D;
 font-family:'Helvetica Neue',sans-serif;
 font-size:16px;
 border-radius:48px;
 -moz-border-radius:48px;
 -webkit-border-radius:48px;
 border:1px solid #623F1D
}

Embed code:<a href="Link" class="styled-button-11">Button name</a>

Button 10
.push_button {
 position: relative;
 width:220px;
 height:40px;
 text-align:center;
 color:#FFF;
 text-decoration:none;
 line-height:43px;
 font-family:'Oswald', Helvetica;
 display: block;
 margin: 30px;
}
.push_button:before {
 background:#f0f0f0;
 background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
 
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 border-radius:5px;
 
 -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
 -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
 box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
 
 position: absolute;
 content: "";
 left: -6px; right: -6px;
 top: -6px; bottom: -10px;
 z-index: -1;
}

.push_button:active {
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
 top:5px;
}
.push_button:active:before{
 top: -11px;
 bottom: -5px;
 content: "";
}

.red {
 text-shadow:-1px -1px 0 #A84155;
 background: #D25068;
 border:1px solid #D25068;
 
 background-image:-webkit-linear-gradient(top, #F66C7B, #D25068);
 background-image:-moz-linear-gradient(top, #F66C7B, #D25068);
 background-image:-ms-linear-gradient(top, #F66C7B, #D25068);
 background-image:-o-linear-gradient(top, #F66C7B, #D25068);
 background-image:linear-gradient(to bottom, #F66C7B, #D25068);
 
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 border-radius:5px;
 
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
 -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
 box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
}

.red:hover {
 background: #F66C7B;
 background-image:-webkit-linear-gradient(top, #D25068, #F66C7B);
 background-image:-moz-linear-gradient(top, #D25068, #F66C7B);
 background-image:-ms-linear-gradient(top, #D25068, #F66C7B);
 background-image:-o-linear-gradient(top, #D25068, #F66C7B);
 background-image:linear-gradient(top, #D25068, #F66C7B);
}

Embed code:<a href="Link" class="push_button red">Button name</a>

Button 11DownloadDownload
.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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3uDI8RJIP60RfVGEmeoPRJoA1jIVV3MubBtxJlwZ1jMrmAupBccKgPkgxWo5yZYyhy84_PNkfH0nIfWtOKsDWKOsmBfXY1cUQD_6ZLN89FCpWqv9uCAk12uUO3M4H62c3PikRTqDJ38P/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));}
Embed Code:<a class="button (big/small) (blue/green/orange/gray)" href="LINK">LINKNAME</a>


Button 12
.button2 {
    text-decoration: none;
    font: bold 13px Arial;
    display: block;
    margin: 20px auto;
    padding: 6px 14px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    width: 100px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
    transition: all 0.5s ease;}

.button2:hover {
    -moz-border-radius: 5px;
    border-radius: 5px;}


.blue {
    color: #fff;
    background: #48C9FF;
    background: -webkit-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
    background: -moz-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
    background: -ms-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
    background: -o-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
    background: linear-gradient(to bottom, #48C9FF 0%, #2EA8E5 100%);
    text-shadow: #29a3cc 0 1px 3px;
    -webkit-box-shadow:
        inset 0 1px 0 #38bdf4,
        inset 0 2px 0 #7bdeff,
        0 1px 3px #777,
        0 0px 1px #ccc;
    -moz-box-shadow:
        inset 0 1px 0 #38bdf4,
        inset 0 2px 0 #7bdeff,
        0 1px 3px #777,
        0 0px 1px #ccc;
    box-shadow:
        inset 0 1px 0 #38bdf4,
        inset 0 2px 0 #7bdeff,
        0 1px 3px #777,
        0 0px 1px #ccc;}

.blue span {
    color: #217aa6;
    text-shadow: #78d2f0 0 1px 0;}​
Embed code:<a class="button2" href="Link">Button name</a>

If you find any problems with this post report a problem or request updates.

Sharing Is Caring