Google Drive direct download link generator

Trình tạo liên kết html

Get Code

Kết quả

"Theo dõi Nguyễn Ngọc Quí Đz thường xuyên để cập nhật các bài viết mới nhé"
Xin chào các bạn, đã đến với blog của mình hôm nay ở bài viết này mình xin chia sẻ cách sử dụng css để tạo ra hover cho button đẹp mắt.

Cách tạo hiệu ứng đẹp mắt nút download, thêm hiệu ứng button đẹp mắt
Cách tạo hiệu ứng đẹp mắt nút download, thêm hiệu ứng button đẹp mắt
Bước 1: Thêm đoạn CSS bên dưới vào trước thẻ ]]></b:skin>
.link{text-decoration:none;color:#55acee;border-bottom:2px dotted #55acee;transition:.3s;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;cursor:url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur),auto}.link:hover{color:#2ecc71;border-bottom:2px dotted #2ecc71}#buttons{padding-top:50px;text-align:center}.btn{border-radius:5px;padding:15px 25px;font-size:22px;text-decoration:none;margin:20px;color:#fff;position:relative;display:inline-block}.btn:active{transform:translate(0px,5px);-webkit-transform:translate(0px,5px);box-shadow:0 1px 0 0}.blue{background-color:#55acee;box-shadow:0 5px 0 0 #3C93D5}.blue:hover{background-color:#6FC6FF}.green{background-color:#2ecc71;box-shadow:0 5px 0 0 #15B358}.green:hover{background-color:#48E68B}.red{background-color:#e74c3c;box-shadow:0 5px 0 0 #CE3323}.red:hover{background-color:#FF6656}.purple{background-color:#9b59b6;box-shadow:0 5px 0 0 #82409D}.purple:hover{background-color:#B573D0}.orange{background-color:#e67e22;box-shadow:0 5px 0 0 #CD6509}.orange:hover{background-color:#FF983C}.yellow{background-color:#f1c40f;box-shadow:0 5px 0 0 #D8AB00}.yellow:hover{background-color:#FFDE29}p{text-align:center;color:#55acee;padding-top:20px}

Cách sử dụng

<div id="buttons">
  <a href="#" class="btn blue">Blue Button</a>
  <a href="#" class="btn green">Green Button</a>
  <a href="#" class="btn red">Red Button</a>
  <a href="#" class="btn purple">Purple Button</a>
  <a href="#" class="btn orange">Orange Button</a>
  <a href="#" class="btn yellow">Yellow Button</a>
</div>


Tác giả: Nguyễn Ngọc Quí Đz
Ngày đăng: 27/05/2018 lúc 5/27/2018
Tổng số bình luận: 0

CHIA SẺ BÀI VIẾT CHO MỌI NGƯỜI:

Bấm Thông báo cho tôi để nhận tin khi admin trả lời