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.

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>

Blue Button
Green Button
Red Button
Purple Button
Orange Button
Yellow Button

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