This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Thursday, 16 November 2017

[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
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 !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js