Thêm hiệu ứng hover cho button đẹp mắt với css

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>


Share:

Không có nhận xét nào