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

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ó trách nhiệm thiết lập vị trí và style cho button. Để hiểu rõ hơn bạn xem ảnh bên dưới nhé :

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à tác dụng 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à tác dụng ở đầu cuối 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

 
 
     
     
     
     [email protected]

&display=swap” rel=”stylesheet”>
    

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

HTML

     
     
     
     
     Niềm Vui Lập Trì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: 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é :

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é:

Bước tiếp theo tất cả chúng ta sẽ đi vào thiết lập style CSS cho button trải 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;
 }

tác dụng bạn xem ở bên dưới nhé :

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à tác dụng bạn xem ở phía bên dưới nhé :

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à tác dụng của đoạn code trên là :Bây giờ tất cả chúng ta sẽ tạo hiệu ứng hover di dời những cạnh này trong button trải 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à tác dụng 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é: