12 buttons CSS chuyên nghiệp dành cho blogspot

Buttons CSS tạo cho bài đăng của bạn trở nên gọn gàng, đẹp hơn. Trong bài viết "12 buttons CSS chuyên nghiệp dành cho blogspot" chia sẻ cùng mọi người các nút "download" đẹp nhất.

12 buttons CSS chuyên nghiệp dành cho blogspot

Bước 1: Đầu tiên các bạn Đăng nhập => Mẫu => Chỉnh sửa Template và ấn Ctrl + F để tìm tới dòng ]]</b:skin>
Bước 2: Tiếp đến chèn một trong số các code dưới trước thẻ vừa tìm được => Lưu lại
Bước 3: Quay trở ra bài viết và chèn đoạn code

<input type="submit" class="styled-button-1" value="Download" /> 

Các bạn chỉnh đoạn styled-button-1 theo ý muốn của mình nhé thay số 1 bằng các số từ 1 đến 12 để phù hợp với code CSS 
 

Code 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
}

Code 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
}

Code 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
}

Code 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
}

Code 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
}                

Code 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%);
        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
}                

Code 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
}

Code 8:

 
.styled-button-8 {
 background: #25A6E1;
 background: -moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
 background: -webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background: -o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background: -ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 background: linear-gradient(top,#25A6E1 0%,#188BC0 100%);
 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
 padding:8px 13px;
 color:#fff;
 font-family:'Helvetica Neue',sans-serif;
 font-size:17px;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border:1px solid #1A87B9
}                

Code 9:

.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
}
             

Code 10:

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

Code 11:

.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
}         

Code 12:

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