Nút nghiêng với màu nền chuyển sắc bằng CSS3

Website 05/09/2020

Nút nghiêng với màu nền chuyển sắc bằng CSS3

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 và hiệu ứng đảo màu khi rê chuột vào sử dụng CSS3 đơn giản.

Nút nghiêng

Xem demo Tải về

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;
}

Tham khảo dịch vụ thiết kế website của chúng tôi.

Thiết Kế Website

Website thu hút thêm nhiều khách hàng với chi phí thấp, giúp đẩy mạnh hoạt động bán hàng mọi lúc mọi nơi, triển khai các chiến lược marketing hiệu quả và đặc biệt là nâng tầm uy tín, giá trị thương hiệu và giảm chi phí kinh doanh.

Giao diện hiện đại

Hoạt động ổn định

Tối ưu hóa công cụ tìm kiếm

Tối ưu trải nghiệm người dùng

Xem Chi Tiết