Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Action Button Theo Thiết Kế Material

Cách Tạo Action Button Theo Thiết Kế Material


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


Cách Tạo Action Button Theo Thiết Kế Material

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo action button theo phong cách thiết kế của material bằng HTML, CSS và Javascript nhé!

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

Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với Google Font và Font Awesome v4.7 thông qua đ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 animation button search</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:[email protected];500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Thêm Các Phần Tử HTML và CSS Cho Button

Phần tiếp theo chúng ta sẽ thêm các thẻ HTML cần thiết để tạo action button thông qua đoạn mã dưới đây nhé:

HTML

<div class="action" onclick="menuToogle()">
    <span>+</span>
    <ul>
        <li><i class="fa fa-facebook" aria-hidden="true"></i> Chia Sẻ Trên FaceBook</li>
        <li><i class="fa fa-twitter" aria-hidden="true"></i> Chia Sẻ Trên Twitter</li>
        <li><i class="fa fa-youtube-play" aria-hidden="true"></i> Chia Sẻ Trên Youtube</li>
        <li><i class="fa fa-linkedin" aria-hidden="true"></i> Chia Sẻ Trên Linkedin  </li>
        <li><i class="fa fa-pinterest" aria-hidden="true"></i> Chia Sẻ Trên Pinterest</li>
    </ul>
</div>

Đoạn mã onclick="menuToogle() dùng để khởi động hàm khi người dùng nhấn vào action button (Cái này mình sẽ nói rõ hơn trong phần Javascript nhé).

Thiết Lập Style Cho Action Button

Trong phần này chúng ta sẽ đi vào thiết kế style cho action button như là font chữ, vị trí, kích thước hiển thị... bằng đoạn CSS dưới đây nhé:

CSS

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
body{
    min-height: 100vh;
    background: linear-gradient(to right, #24243e, #302b63, #0f0c29); 
}
.action{
    position: fixed;
    top: 50px;
    left: 50px;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 5px 5px rgba(0,0,0,0.1);
    cursor: pointer;
}

Kết quả của đoạn mã trên bạn xem ở bên dưới nha:

Action Button Material 1

Hiển Thị Nội Dung Action Button Bằng Javascript

Trong phần này chúng ta sẽ sử dụng Javascript cùng với CSS để hiển thị nội dung khi người dùng click vào icon menu thông qua đoạn mã sau nhé:

Javascript

function menuToogle() {
    var action = document.querySelector('.action');
    action.classList.toggle('active');
}

Mình có một lưu ý một chút là đoạn mã trên sẽ chọn thẻ div có class là .action. Mỗi khi người dùng nhấn vào icon menu(class .action), nếu nó chưa có class active thì được sẽ tự động thêm và ngược lại.

Tiếp Theo chúng ta sẽ sử dụng các thuộc tính CSS để hiển thị nội dung khi người dùng nhấn vào menu thông qua đoạn mã bên dưới nhé:

CSS

/*Thiết lập style cho icon menu (+)*/
.action span{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #302b63;
    font-size: 2em;
    transition: 0.2s ease-in-out;
}
/*Chuyển icon menu từ "+" sang "x" */
.action.active span{
    transform: rotate(-135deg);
}
/*Thiết lập style cho ul*/
.action ul{
    position: absolute;
    top: 55px;
    background: #fff;
    min-width: 250px;
    padding: 20px;
    border-radius: 20px;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
}
/*Thiết lập style cho ul khi được active*/
.action.active ul{
    top: 75px;
    opacity: 1;
    visibility: visible;
    transition: 0.4s;
    box-shadow: 3px 4px 5px 0px rgba(180, 180, 180, 0.4);
}

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

Thiết Kế Lại Nội Dung Trong Action Button

Phần cuối cùng chúng ta sẽ đi vào thiết kế lại nội dung trong action button như là tạo hiệu ứng hover cho từng thẻ li, tạo đường hr ngăn cách nội dung giữa các phần... Để hiểu rõ hơn bạn xem đoạn mã CSS dưới đây nhé:

CSS

/*Thiết kế lại style cho thẻ li*/
.action ul li{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    transition: 0.2s;
}
/*Tạo ngăn cách giữa các phần(trừ thẻ li cuối cùng)*/
.action ul li:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
/*Thiết lập style cho icon*/
.action ul li i{
    font-size: 20px;
    margin-right: 10px;
    opacity: 0.4;
}
/*Tạo hiệu ứng hover cho thẻ li*/
.action ul li:hover{
    font-weight: 500;
}
.action ul li:hover i{
    opacity: 0.8;
}
ul li:nth-child(1):hover {
    color: #4267B2;
}
ul li:nth-child(2):hover {
    color: #55acee;
}
ul li:nth-child(3):hover {
    color: #cd201f;
}
ul li:nth-child(4):hover {
    color: #0077B5;
}
ul li:nth-child(5):hover {
    color: #bd081c;
}

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

See the Pen Action Button Theo Thiết Kế Material by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức để tạo action button theo phong cách material 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ẻ!

Load WooCommerce Stores in 249ms!