Blog / Website

Cập nhật các công nghệ mới liên quan đến lập trình web.

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.

Small Logo

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
Dịch vụ Thiết Kế Website

Chúc các bạn thành công!