[Blogger] Tạo button Demo và Download theo phong cách Material Design

Bộ đôi button Demo và Download là chủ đề được rất nhiều blogger quan tâm khi họ thường xuyên viết bài chia sẻ về template blogger. Để tạo được 1 cặp nút demo và download thì trên mạng rất nhiều bài viết chia sẻ. Và ở khuôn khổ bài viết này tôi xin chia sẻ thêm bộ đôi này nhưng với thiết kế Material Design

Bạn có thể xem live demo

DEMO DOWNLOAD

Thiết kế Material giúp button trở nên nổi bật, thanh thoát chỉ dùng css nhưng cũng đầy sức thu hút người xem. Để làm được bạn tiến hành như sau

Đăng nhập vào trang quản trị và vào phần chỉnh sửa HTML

Tích hợp Material Icons nếu như template của bạn chưa có, nhúng đoạn mã sau vào trước thẻ </head>

<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>

Viết css cho button, dán đoạn code sau trước thẻ ]]></b:skin>

#btnripplebsd{margin:19px auto;text-align:center}
#btnripplebsd a{text-decoration:none;color:rgba(255,255,255,0.7)!important}
.bsdripplebtn{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.6em;border-radius:4px;color:rgba(255,255,255,0.7);font-weight:400;padding:15px 20px;margin:0 10px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
.bsdripplebtn:hover,.bsdripplebtn:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.bsdripplebtn.btnone{background:#33ccff}
.bsdripplebtn.btnone:before{content:'\e8f4'}
.bsdripplebtn.btntwo:before{content:'\e2c4'}
.bsdripplebtn.btnone:before,.bsdripplebtn.btntwo:before{font-family:'Material Icons';font-size:20px;margin:0 5px 0 0}
.bsdripplebtn.btntwo{background:#ff3333}
#btnripplebsd a:hover,#btnripplebsd a:active{color:#f2f2f2!important;transition:all .3s ease-in-out!important}

Khi viết bài, bạn chuyển sang chế độ HTML và dán đoạn code sau để hiển thị button

<div id="btnripplebsd">
 <a class="bsdripplebtn btnone" href="#" target="_blank">DEMO</a>
 <a class="bsdripplebtn btntwo" href="#" target="_blank">DOWNLOAD</a>
</div>

Thay # bằng liên kết của bạn

Good Luck !