Trên các trang Web/Blog chia sẻ, các bạn thường thấy họ cho download một số phần mềm, tiện ích... thông qua các nút bấm "DOWNLOAD" hoặc xem thử thông qua nút "DEMO". Tuỳ theo các trang Web/Blog mà các nút bấm này khá đẹp, có hiệu ứng động, khi rê chuột vào nó sẽ thành hình khác hoặc chữ Download sẽ biến thành màu khác...
Để làm việc này, các bạn phải có một số chương trình (phần mềm) hỗ trợ như là: Photoshop hoặc các phần mềm tạo nút bấm chuyên nghiệp...
Trong giới hạn bài viết này, tôi chia sẻ với các bạn cách tạo nút bấm"DOWNLOAD" có hiệu ứng động (thay đổi hình hoặc chữ Download đổi màu khi rê chuột vào) mà không cần phải nhờ phần mềm hỗ trợ nào hết chỉ cần bạn dán code và thay đổi link ảnh vào mà thôi...
1. Đầu tiên các bạn mở Blogger lên -> Mẫu -> Chỉnh sửa HTML -> Tìm đến thè ]]></b:skin> . Và bạn hãy dán đoạn mã bên dưới vào và nhấn Save để lưu lại.
#wrap { margin: 20px auto; text-align: center;}
#wrap br { display: none;}
.btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s;}
.btn-slide2 { border: 2px solid #efa666;}
.btn-slide:hover { background-color: #0099cc;}
.btn-slide2:hover { background-color: #efa666;}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc;}
.btn-slide2:hover span.circle2 { color: #efa666;}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0;}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px;}
.btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%;}
.btn-slide2 span.circle2 { background-color: #efa666;}
.btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s;}
.btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px;}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0;}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff;}
#wrap br { display: none;}
.btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s;}
.btn-slide2 { border: 2px solid #efa666;}
.btn-slide:hover { background-color: #0099cc;}
.btn-slide2:hover { background-color: #efa666;}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc;}
.btn-slide2:hover span.circle2 { color: #efa666;}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0;}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px;}
.btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%;}
.btn-slide2 span.circle2 { background-color: #efa666;}
.btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s;}
.btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px;}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0;}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff;}
Tiếp đến các bạn tạo button Demo và Download cho bài đăng .
Mỗi khi bạn viết bài thi chèn đoạn mã dưới đây , nhớ là soạn thảo bằng html nhé . Code có dạng như sau :
<div id="wrap"><a href="//www.khari-nnt.net" class="btn-slide" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">Demo</span> <span class="title-hover">Click here</span> </a> <a href="//www.khari-nnt.net" class="btn-slide2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">Download</span> <span class="title-hover2">Click here</span> </a> </div>
Như vậy đã xong rồi nhé, Chúc các bạn thành công ❤❤❤❤☺☺☺
