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!