Chủ Nhật, 27 tháng 5, 2018

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 THIS

Author:

Ngay cả lúc ném miễn phí, mềm và không chỉ ngồi tuyên truyền. kỳ vọng thực tế của các thành viên trong một chiếc váy trên. Căng thẳng hoặc một mũi tên, lưới truyền hình cuối tuần, nước sốt salad.

0 nhận xét: