Bài viết này hướng dẫn làm một nút (button) có độ nghiêng, với màu nền chuyển sắc sử dụng CSS3 đơn giản.
HTML
Cần có thẻ span
để định hình lại phần chữ.
<a class="btn" href="https://www.inithtml.com/"><span>Đây là cái nút</span></a>
CSS
CSS của .btn
.
.btn { font-size: 16px; text-transform: uppercase; letter-spacing: 2px; color: #fff; padding: 15px 30px; background: #56CCF2; background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2, #56CCF2, #2F80ED); background: linear-gradient(to right, #2F80ED, #56CCF2, #56CCF2, #2F80ED); border: none; border-radius: 0; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; background-size: 300% 100%; display: inline-block; transform: skew(-15deg); }
Giữ chữ không nghiêng theo nút.
.btn span { /* Giữ cho chữ không bị nghiêng theo */ display: inline-block; transform: skew(15deg); }
Hiệu ứng khi rê chuột vào.
.btn:hover, .btn:focus { background-position: 100% 0; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
Chúc các bạn thành công!
Người Qua Đường
Tháng Bảy 30, 2019 lúc 1:12 sánghay lắm, cám ơn bạn đã chia sẻ