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 Hover Button Bằng HTML CSS Phần 1

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


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

Tạo Hiệu Ứng Hover 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 hover button cho trang web bằng HTML, CSS, Javascript nhé!

Hiệu Ứng Hover Button 1

Trong Phần này chúng ta sẽ đi vào thiết kế hiệu ứng hover cho button bằng sự chuyển động của background nhé!

Đầu tiên chúng ta cần tạo file hieu_ung_hover_1.html(Nơi lưu trữ cấu trúc phần tử HTML) và hieu_ung_hover_1.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>Hiệu Ứng Hover Button 1</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="hieu_ung_hover_1.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="#">
  Niềm Vui Lập Trình
</a>

CSS

body{
    font-family: 'Roboto', sans-serif;
    padding:0;
    margin:0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
a{
    position: relative;
    padding: 15px 30px;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 24px;
    border: 2px solid #000;
    box-sizing: border-box;
    transition: 0.5s;
}

Đoạn mã CSS trên có nhiệm vụ thiết lập vị trí và style cho button. Để hiểu rõ hơn bạn xem ảnh bên dưới nhé:

Kết_quả_hiệu_ứng_hover_button_1_1

Bước tiếp theo chúng ta sẽ thiết lập style cho đối tượng a:before để tạo hiệu ứng hover button này nhé!

CSS

a:before{
    content: '';
    position: absolute;
    top: 0;
    left:0;
    width: 50%;
    height: 100%;
    background: #000;
    z-index: -1;
    transform:  scale(0);
    transition: transform 0.5s;
    transform-origin: left;
}
a:hover:before{
    transform:  scaleX(1);
    transition: transform 0.5s;
    transform-origin: right;
}

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

Như bạn thấy thì chúng ta đã sử dụng a:before để tạo hiệu ứng hover thay đổi background của 50% độ rộng của button. Bước cuối cùng chúng ta sẽ sử dụng a:after để thay đổi background của phần còn lại khi người dùng hover vào nút nhé:

CSS

a:after{
    content: '';
    position: absolute;
    top: 0;
    right:0;
    width: 50%;
    height: 100%;
    background: #000;
    z-index: -1;
    transform:  scale(0);
    transition: transform 0.5s;
    transform-origin: right;
}
a:hover:after{
    transform:  scaleX(1);
    transition: transform 0.5s;
    transform-origin: left;
}
/*Thay đổi màu khi người dùng hover vào nút*/
a:hover{
    color:#fff;
}

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

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

Hiệu Ứng Hover Button 2

Tiếp theo chúng ta sẽ đi vào cách tạo hiệu ứng hover button thứ hai thông qua border nhé!

Đầu tiên chúng ta cần tạo file hieu_ung_hover_2.html(Nơi lưu trữ cấu trúc phần tử HTML) và hieu_ung_hover_2.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>Hiệu Ứng Hover Button 2</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="hieu_ung_hover_2.css">
</head>
<body>
</body>
</html>

Bước tiếp theo chúng ta sẽ thêm phần tử HTML và thiết lập vị trí cũng như style CSS cho button thông qua đoạn mã sau nhé:

HTML

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

CSS

body{
    font-family: 'Roboto', sans-serif;
    padding:0;
    margin:0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #000;
}
a{
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-decoration: none;
    font-size: 28px;
}
a span{
    position: absolute;
    display: block;
    background: #fff;
    transition: transform ease-in-out 0.2s;
}

Kết quả bạn xem ở bên dưới nhé:

Kết_quả_hiệu_ứng_hover_button_2_1

Tiếp theo chúng ta thiết lập hiệu ứng hover cho đường viền trên cùng của button thông qua thẻ span thứ 1 trong file HTML nhé:

CSS

a span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: right;
    transition-delay: 0s;
}
a:hover span:nth-child(1){
    transform: scaleX(1);
    transform-origin: left;
}

Kết quả bạn xem video bên dưới đây nhé:

Bước tiếp theo chúng ta sẽ tạo hiệu ứng hover cho các cạnh còn lại nhưng với độ delay tăng dần từ 0.2, 0.4 và 0.6 cho thẻ span thứ 2, 3 và 4. Mục đích của cách thiết lập delay này là tạo cảm giác border sẽ chạy xung quanh button khi người dùng hover. Để hiểu rõ hơn bạn xem đoạn mã sau đây nhé:

CSS

a span:nth-child(2){
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom;
    transition-delay: 0.2s;
}
a:hover span:nth-child(2){
    transform: scaleY(1);
    transform-origin: top;
}
a span:nth-child(3){
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
    transition-delay: 0.4s;
}
a:hover span:nth-child(3){
    transform: scaleX(1);
    transform-origin: right;
}
a span:nth-child(4){
    bottom: 0;
    left: 0;
    width: 1px;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    transition-delay: 0.6s;
}
a:hover span:nth-child(4){
    transform: scaleY(1);
    transform-origin: bottom;
}

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

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

Hiệu Ứng Hover Button 3

Tiếp theo chúng ta sẽ đi vào cách tạo hiệu ứng hover button thứ hai thông qua chuyển động của borderbackground nhé!

Đầu tiên chúng ta cần tạo file hieu_ung_hover_3.html(Nơi lưu trữ cấu trúc phần tử HTML) và hieu_ung_hover_3.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>Hiệu Ứng Hover Button 3</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="hieu_ung_hover_3.css">
</head>
<body>
    <a href="#">
        Niềm Vui Lập Trình
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </a>
</body>
</html>

Bước tiếp theo chúng ta sẽ đi vào thiết lập style CSS cho button thông qua đoạn code sau đây nhé:

CSS

body{
    font-family: 'Roboto', sans-serif;
    padding:0;
    margin:0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #000;
}
a{
    position: absolute;
    display: block;
    padding: 20px 40px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    font-size: 28px;
    letter-spacing: 2px;
}

kết quả bạn xem ở bên dưới nhé:

Kết_quả_hiệu_ứng_hover_button_3_1

Bước tiếp theo chúng ta thiết lập style và vị trí của các thẻ span có số thư tự lẻ thông qua cách gọi span:nth-child(odd) trong CSS. Để hiểu rõ hơn bạn xem đoạn mã sau đây nhé:

CSS

a span:nth-child(odd) {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: 0.5s ease-in-out;
}
a span:nth-child(1){
    top: 0;
    left: 50%;
}
a span:nth-child(3){
    bottom: 0;
    right: 50%;
}

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

Kết_quả_hiệu_ứng_hover_button_3_2

Kế tiếp chúng ta sẽ đi vào thiết kế style và vị trí của các thẻ span có số thứ tự chẵn thông qua span:nth-child(even) nhé:

CSS

a span:nth-child(even) {
    position: absolute;
    display: block;
    width: 2px;
    height: 100%;
    background: #fff;
    transition: 0.5s ease-in-out;
}
a span:nth-child(2){
    top: 50%;
    left: 0;
}
a span:nth-child(4){
    bottom: 50%;
    right: 0;
}

Và kết quả của đoạn code trên là:

Kết_quả_hiệu_ứng_hover_button_3_2

Bây giờ chúng ta sẽ tạo hiệu ứng hover dịch chuyển các cạnh này trong button thông qua đoạn mã sau đây nhé:

a:hover span:nth-child(1){
    top: 0;
    left: -50%;
}
a:hover span:nth-child(3){
    bottom: 0;
    right: -50%;
}
a:hover span:nth-child(2){
    top: -50%;
    left: 0;
}
a:hover span:nth-child(4){
    bottom: -50%;
    right: 0;
}
/*Ẩn đi những cạnh bên ngoài button*/
a{
    overflow: hidden;
}

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

Bước cuối cùng chúng ta sẽ thiết lập chuyển động màu nền khi người dùng hover bằng cách sử dụng đối tượng a:before trong CSS nhé:

CSS

a:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background: #fff;
    transition: 0.4s;
    transition-delay: 0.4s;
}
a:hover:before{
    left: 100%;
}

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

See the Pen Hieu_ung_hover_button_3 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 những hiệu ứng hover 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ẻ!