Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Hiệu Ứng Animation Button Bằng HTML CSS Phần 1

Tạo Hiệu Ứng Animation Button Bằng HTML CSS Phần 1


Ngày 9 Tháng 9 Năm 2020

Tạo Hiệu Ứng Animation Button Bằng HTML CSS Phần 1

Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu cách thiết kế và tạo hiệu ứng animation button cho trang web bằng HTML, CSS, Javascript nhé!

Tạo Hiệu Ứng Animation Button HTML CSS

Trong Phần này chúng ta sẽ đi vào thiết kế và tạo hiệu ứng cho button bằng việc sử dụng animation trong CSS nhé!

Đầu tiên chúng ta cần tạo file index.html(Nơi lưu trữ cấu trúc phần tử HTML) và style.css(Nơi lưu trữ thuộc tính CSS). Sau đó sẽ liên kết chúng với nhau bằng đoạn mã dưới đây nhé:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tạo Hiệu Ứng Hover Button</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Tiếp theo chúng ta sẽ đi vào xây dựng cấu trúc phần tử HTML cho hiệu ứng hover button thông qua đoạn mã bên dưới nhé:

HTML

<a href="#">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     Niềm Vui Lập Trình
</a>

CSS

*{
    margin: 0;
    padding: 0;
    background: #0c002b;
    font-family: 'Roboto', sans-serif;
}
/*Đưa đối tượng ra giữa màn hình và thiết lập style cho nó*/
a{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #1670f0;
    padding: 30px 60px;
    font-size: 30px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
a:before{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    width:50%;
    background: rgba(255,255,255,0.05);
}

Và kết quả bạn xem ở phía bên dưới nhé:

Kết_quả_hiệu_ứng_animation_1

Tiếp theo chúng ta sẽ thiết lập border cho button thông qua các thẻ span trong file HTML thông qua đoạn code sau đây nhé:

CSS

a span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #0c002b, #1779ff);
}
a span:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #0c002b, #1779ff);
}
a span:nth-child(3) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to left, #0c002b, #1779ff);
}
a span:nth-child(4) {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #0c002b, #1779ff);
}

Kết quả đoạn mã CSS trên bạn xem ở dưới đây nhé:

Kết_quả_hiệu_ứng_animation_2

Việc tạo ra những đường viền như vậy cho button có mục đích là khi chúng ta thêm hiệu ứng animation thì các border sẽ chuyển động một cách đồng bộ và có trình tự rõ ràng. Bước tiếp theo bạn và mình sẽ thêm hiệu ứng chuyển động cho từng thành phần thẻ span con với tên là animated1, animated2, animated3animated4. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

CSS

a span:nth-child(1) {
    animation: animated1 2s linear infinite;
}
@keyframes animated1{
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(100%);
    }
}
a span:nth-child(2) {
    animation: animated2 2s linear infinite;
    animation-delay: 1s;
}
@keyframes animated2{
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: translateY(100%);
    }
}
a span:nth-child(3) {
    animation: animated3 2s linear infinite;
}
@keyframes animated3{
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(-100%);
    }
}
a span:nth-child(4) {
    animation: animated4 2s linear infinite;
    animation-delay: 1s;
}
@keyframes animated4{
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateY(-100%);
    }
}
/*Không Cho hiệu ứng đường viền vượt quá độ rộng và cao của button*/
a{
    overflow: hidden;
}

Và kết quả cuối cùng bạn xem ở dưới đây nhé:

See the Pen hieu_ung_animation_button_1 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn về kiến thức tạo hiệu ứng animation button hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!