CSS3 Button cực đẹp cho blogspot

1. Đăng nhập vào Blog > Template
2. Tìm ]]></b:skin>
3. Cho css vào trước nó

Demo

/*== Button hover css ==*/

button{border: 0; font-family: "Open Sans"; font-weight: 600; padding: 8px 12px; width: 120px; color: #fff; border-radius: 5px; background-color: #DB733B; cursor: pointer; position: relative; z-index: 1;}

.b1:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}

.b1:hover:before{height: 100%; bottom: auto; top: 0;}



.b2:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}

.b2:hover:before{height: 100%; top: auto; bottom: 0;}



.b3:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}

.b3:hover:before{width: 100%; right: auto; left: 0;}



.b4:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}

.b4:hover:before{width: 100%; left: auto; right: 0;}



.b5:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: -1;}

.b5:hover:before{width: 100%; height: 100%; right: auto; left: 0; bottom: auto; top: 0;}



.b6:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}

.b6:hover:before{width: 100%; height: 100%; left: auto; right: 0; top: auto; bottom: 0;}



.b7:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 50%; bottom: 50%; transition:.4s; z-index: -1;}

.b7:hover:before{width: 100%; height: 100%; left: 0; bottom: 0;}



.b8:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}

.b8:after{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}

.b8:hover:before, .b8:hover:after{width: 50%;}



.b9:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 50%; top: 0; transition:.3s; z-index: -1;}

.b9:after{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 50%; top: 0; transition:.3s; z-index: -1;}

.b9:hover:before, .b9:hover:after{width: 50%;}

.b9:hover:before{left: 0;}

.b9:hover:after{right: 0;}



.b10:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}

.b10:after{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: -1;}

.b10:hover:before, .b10:hover:after{width: 50%; height: 100%;}



.b11:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}

.b11:after{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}

.b11:hover:before, .b11:hover:after{width: 50%; height: 100%;}



.b12:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}

.b12:after{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}

.b12:hover:before, .b12:hover:after{height: 50%;}



.b13:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 50%; transition:.3s; z-index: -1;}

.b13:after{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; right: 0; top: 50%; transition:.3s; z-index: -1;}

.b13:hover:before, .b13:hover:after{height: 50%;}

.b13:hover:before{bottom: 0;}

.b13:hover:after{top: 0;}



/*= button hover with text =*/

.withText button{height: 39px; overflow: hidden;}

button span{display: block; position: relative; transition:.35s;}



.bt1 .after{top: -45px;}

.bt1 .before{top: 0;}

.bt1:hover .before{top: 45px;}

.bt1:hover .after{top: -18px;}

.bt1:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}

.bt1:hover:before{height: 100%;}



.bt2 .after{bottom: -10px;}

.bt2 .before{bottom: 0;}

.bt2:hover .before{bottom: 45px;}

.bt2:hover .after{bottom: 18px;}

.bt2:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}

.bt2:hover:before{height: 100%;}



.bt3 .after{left: -90px; top: -18px;}

.bt3 .before{right: 0;}

.bt3:hover .before{right: -90px;}

.bt3:hover .after{left: 0;}

.bt3:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}

.bt3:hover:before{width: 100%;}



.bt4 .after{right: -90px; top: -18px;}

.bt4 .before{left: 0;}

.bt4:hover .before{left: -90px;}

.bt4:hover .after{right: 0;}

.bt4:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: -1;}

.bt4:hover:before{width: 100%;}



.bt5 .after{top: -45px; z-index: 9;}

.bt5 .before{top: 0;}

.bt5:hover .before{top: -45px;}

.bt5:hover .after{top: -18px;}

.bt5:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: 1;}

.bt5:hover:before{height: 100%;}



.bt6 .after{bottom: -10px; z-index: 9;}

.bt6 .before{bottom: 0;}

.bt6:hover .before{bottom: -45px;}

.bt6:hover .after{bottom: 18px;}

.bt6:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: 1;}

.bt6:hover:before{height: 100%;}



.bt7 .after{left: -90px; top: -18px; z-index: 9;}

.bt7 .before{right: 0;}

.bt7:hover .before{right: 90px;}

.bt7:hover .after{left: 0;}

.bt7:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: 1;}

.bt7:hover:before{width: 100%;}



.bt8 .after{right: -90px; top: -18px; z-index: 9;}

.bt8 .before{left: 0;}

.bt8:hover .before{left: 90px;}

.bt8:hover .after{right: 0;}

.bt8:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: 1;}

.bt8:hover:before{width: 100%;}



.bt9 .after{top: -45px;}

.bt9 .before{top: 0;}

.bt9:hover .before{top: 45px;}

.bt9:hover .after{top: -18px;}

.bt9:hover{background-color: #3395D0; transition:.4s;}



.bt10 .after{bottom: -10px;}

.bt10 .before{bottom: 0;}

.bt10:hover .before{bottom: 45px;}

.bt10:hover .after{bottom: 18px;}

.bt10:hover{background-color: #3395D0; transition:.4s;}



.bt11 .after{left: -90px; top: -18px;}

.bt11 .before{right: 0;}

.bt11:hover .before{right: -90px;}

.bt11:hover .after{left: 0;}

.bt11:hover{background-color: #3395D0; transition:.4s;}



.bt12 .after{right: -90px; top: -18px;}

.bt12 .before{left: 0;}

.bt12:hover .before{left: -90px;}

.bt12:hover .after{right: 0;}

.bt12:hover{background-color: #3395D0; transition:.4s;}



.bt13 .after{top: -45px; z-index: 9;}

.bt13 .before{top: 0;}

.bt13:hover .before{top: -45px;}

.bt13:hover .after{top: -18px;}

.bt13:hover{background-color: #3395D0; transition:.4s;}



.bt14 .after{bottom: -10px; z-index: 9;}

.bt14 .before{bottom: 0;}

.bt14:hover .before{bottom: -45px;}

.bt14:hover .after{bottom: 18px;}

.bt14:hover{background-color: #3395D0; transition:.4s;}



.bt15 .after{left: -90px; top: -18px; z-index: 9;}

.bt15 .before{right: 0;}

.bt15:hover .before{right: 90px;}

.bt15:hover .after{left: 0;}

.bt15:hover{background-color: #3395D0; transition:.4s;}



.bt16 .after{right: -90px; top: -18px; z-index: 9;}

.bt16 .before{left: 0;}

.bt16:hover .before{left: 90px;}

.bt16:hover .after{right: 0;}

.bt16:hover{background-color: #3395D0; transition:.4s;}

/*== Button hover css end ==*/

4. Lưu Template Lại.