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.

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

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

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