Chủ Nhật, tháng 2 26, 2017

Code CSS Button Đẹp Cho Blogger


Hôm nay lục sục trên mạng kiếm code CSS "BUTTON" đẹp cho blogger. Ai ngờ ra đoạn code CSS này. Mình dùng thấy rất ok và khá đẹp nên viết bài share luôn cho anh em :D. Ai chưa có thì lấy về dùng thử nhé :D

/*Button Đẹp Cho Blogger By BomKhung.Info*/
#download_area {width:97%; margin:0px auto;text-align: center}
#download_area a, #download_area a:hover, #download_area a:visited{color:rgb(230, 230, 230); text-decoration:none; border-bottom:none;}
#download_area p {font-style:italic;font-size:12px;}
.button{display: inline-block;white-space: nowrap;background-color: rgb(109, 212, 37);background-image: none;border-width: 1px;border-style: solid;border-right: 1px solid rgba(255, 255, 255, 0.03);border-left: 1px solid rgba(255, 255, 255, 0.03);border-image: none;border-color: rgba(255, 255, 255, 0.04) rgba(255, 255, 255, 0.03) rgb(34, 34, 34);padding: 0 1.5em;margin: 0.5em;font: 1em/2em 'Coda', Cursive;text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);text-transform:uppercase;-webkit-transition: all 0.1s linear 0s;-moz-transition: all 0.1s linear 0s;-o-transition: all 0.1s linear 0s;transition: all 0.1s linear 0s;}
.button:hover{background-color: rgb(45, 45, 45);-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);-webkit-box-shadow: 0px px 4px rgba(0, 0, 0, 0.7);box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);}
.button:active{-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;position: relative;top: 1px;}
.button:focus{outline: 0;background-color: rgba(255, 0, 0, 0.5);}
.button:before{background: #000;background: rgba(0,0,0,.1);float: left;width: 1em;text-align: center;font-size: 1.5em;margin: 0 1em 0 -1em;padding: 0 .2em;-moz-box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,0.03);-webkit-box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,0.03);box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,0.03);-moz-border-radius:.15em 0 0 .15em;-webkit-border-radius:.15em 0 0 .15em;border-radius:.15em 0 0 .15em;pointer-events: none;content: "\279C";color:rgb(200, 0, 0);}


Còn cách sữ dụng thì cũng không xa la gì nữa :D. Theo như bên dưới nhé mọi người :D
<div class='button'><a href=''>DEMO</a></div>
<div class='button'><a href=''>DOWNLOAD</a></div>

DEMO


Chúc các bạn thành công :D