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 Animation Cho Social Button

Tạo Hiệu Ứng Hover Animation Cho Social Button


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

Tạo Hiệu Ứng Hover Animation Cho Social Button

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách ta ra hiệu ứng hover animation cho social button bằng HTML và CSS nhé!

Tạo Cấu Trúc Phần Tử Cho Social Button

Phần đầu tiên chúng ta sẽ đi vào tạo hai file có tên là index.html(Nơi lưu trữ file HTML) và style.css(Nơi lưu trữ code CSS). Đồng thời sẽ liên kết dự án này tới CDN của Font Awesome v4.7 và Google Font thông qua đoạn mã sau 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 Chuyển Động Cho Social Button</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,[email protected],400;1,500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Thêm Các Phần Tử HTML Cho Social Button

Bước tiếp theo chúng ta sẽ đi vào tạo các thẻ HTML cần thiết cho social button thông qua đoạn mã sau nhé:

HTML

<div class="container">
    <div class="button">
        <div class="icon">
            <i class="fa fa-facebook" aria-hidden="true"></i>
        </div>
        <span>Facebook</span>
    </div>

    <div class="button">
        <div class="icon">
            <i class="fa fa-instagram" aria-hidden="true"></i>
        </div>
        <span>Instagram</span>
    </div>

    <div class="button">
        <div class="icon">
            <i class="fa fa-linkedin" aria-hidden="true"></i>
        </div>
        <span>Linkedin</span>
    </div>

    <div class="button">
        <div class="icon">
            <i class="fa fa-twitter" aria-hidden="true"></i>
        </div>
        <span>Twitter</span>
    </div>
    <div class="button">
        <div class="icon">
            <i class="fa fa-youtube-play" aria-hidden="true"></i>
        </div>
        <span>Youtube</span>
    </div>
</div>

Nếu bạn muốn tìm các icon font awesome v4.7 mà mình yêu thích thì có thể truy cập ở đây nhé. Tiếp theo chúng ta sẽ thiết lập các thuộc tính CSS tổng quát cho social button thông qua đoạn mã sau:

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
html, body{
    display: grid;
    height: 100%;
    width: 100%;
    place-items: center;
    background: linear-gradient(315deg, #ffffff 0%, #d7e1ec);
}

Và kết quả của hai đoạn mã bạn xem ở bên dưới nhé:

Hiệu Ứng Hover Animation Cho Social Button 1

Thiết Lập Style Cho Social Button

Trong phần này chúng ta sẽ thiết lập style CSS cho social button thông qua đoạn mã dưới đây nhé:

CSS

.container .button{
    display: inline-block;
    height: 60px;
    width: 60px;
    float: left;
    margin: 0 5px;
    background: #fff;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
    transition: all 0.5s ease-out;
}
.container .button .icon{
    display: inline-block;
    text-align: center;
    height: 60px;
    width: 60px;
    border-radius: 50px;
    box-sizing: border-box;
    line-height: 60px;
    transition: all 0.5s ease-out;
}
.container .button .icon i{
    font-size: 25px;
    line-height: 60px;
    transition: all 0.5s ease-out;
}
.container .button  span{
    font-size: 20px;
    font-weight: 500;
    line-height: 60px;
    margin-left: 10px;
    transition: all 0.5s ease-out;
}

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

Hiệu Ứng Hover Animation Cho Social Button 2

Tạo Hiệu Ứng Hover Cho Social Button

Phần kế tiếp chúng ta sẽ tạo hiệu ứng hover cho nút xã hội bằng đoạn mã bên dưới nha:

CSS

.container .button:hover{
    width: 200px;
}
.container .button{
    overflow: hidden;
}

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

Thiết Lập Màu Sắc Cho Social Button

Phần cuối cùng này chúng ta sẽ đi vào thiết lập màu sắc đặc trưng cho từng social button (ví dụ như social facebook button icon sẽ có màu xanh đậm...). Nếu bạn muốn xem mã màu chủ đạo của các icon mạng xã hội phổ biến hiện nay thì có thể truy cập ở đây nhé.

CSS

.container .button:nth-child(1):hover .icon{
    background: #4267B2;
}
.container .button:nth-child(2):hover .icon{
    background: #e4405f;
}
.container .button:nth-child(3):hover .icon{
    background: #0077B5;
}
.container .button:nth-child(4):hover .icon{
    background: #55acee;
}
.container .button:nth-child(5):hover .icon{
    background: #cd201f;
}
.container .button:hover .icon i{
    color: #fff;
}
.container .button:nth-child(1) span{
    color: #4267B2;
}
.container .button:nth-child(2) span{
    color: #e4405f;
}
.container .button:nth-child(3) span{
    color: #0077B5;
}
.container .button:nth-child(4) span{
    color: #55acee;
}
.container .button:nth-child(5) span{
    color: #cd201f;
}

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

See the Pen Hiệu Ứng Hover Animation Social Button by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Nguồn tham khảo https://www.youtube.com/watch?v=yU3giDe-N6c&ab_channel=CodingNepal.

Nếu bạn muốn xem thêm các hiệu ứng social button khác thì truy cập ở đây nha.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn cách tạo hiệu ứng hover animation social 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ẻ!