Share Tạo hiệu ứng button đẹp mắt bằng CSS

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Button là thành phần không thể thiếu trên bất kỳ website nào, trên các website khác nhau các bạn sẽ thấy nhiều kiểu button được thiết kế khác nhau, bên cạnh đó hiệu ứng trên các button cũng là một cách nhấn mạnh vai trò quan trọng của nó. Bài viết này tôi sẽ hướng dẫn các bạn tạo hiệu ứng khi hover lên button, tất cả các hiệu ứng được tạo ra chỉ bằng các dòng mã lệnh CSS đơn giản, gọn gàng.

Qua các dòng mã lệnh CSS của tôi, các bạn vẫn có thể tuỳ chỉnh mã lệnh để tạo ra các hiệu ứng riêng của mình. Bây giờ, các bạn tạo một button như sau:
HTML:
<button type="button"></button>
Tiếp theo, các bạn tạo hiệu ứng khi hover lên button như sau:
CSS:
button {
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    color: #1d9af2;
    cursor: pointer;
    opacity: 0.5;
    background-color: #292d3e;
    border: 1px solid #1d9af2;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

button:hover {
    transform: rotateZ(-30deg);
}
Một hiệu ứng khác:
CSS:
button {
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    color: #1d9af2;
    cursor: pointer;
    background-color: #292d3e;
    border: 1px solid #1d9af2;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

button:hover {
    box-shadow: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea;
    transform: translateX(-3px);
}
Và cuối cùng là một hiệu ứng đẹp mắt khác:
CSS:
button {
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    color: #1d9af2;
    cursor: pointer;
    background-color: #292d3e;
    border: 1px solid #1d9af2;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

button:hover {
    animation: swing 1s ease;
    animation-iteration-count: 1;
}

@keyframes swing {
    15% {
        transform: translateX(5px);
    }
    
    30% {
        transform: translateX(-5px);
    }
    
    50% {
        transform: translateX(3px);
    }
    
    65% {
        transform: translateX(-3px);
    }
    
    80% {
        transform: translateX(2px);
    }
    
    100% {
        transform: translateX(0);
    }
}
 
Back
Top