Tạo Link Icon Button với Html Css

Làm thế nào để tạo ra một link hiển thị kiểu button có icon bên cạnh để làm rõ hơn nội dung mà link muốn truyền tải?

Trong video này tôi chia sẻ bạn cách tư duy để tạo ra một một nút bấm link icon button chất lượng.

Video hướng dẫn tạo Link Icon Button với Html Css

Mã code tạo Link Icon Button

Bên dưới là full mã code tạo button messenger và youtube. Trước hết bạn hãy tự thực hành để xem mình đang yếu ở chổ nào.

Nếu có đoạn nào chưa ổn thì bạn có thể xem code mẫu để chỉnh lại cho chuẩn nhất.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
    <title>Tạo link icon button</title>
</head>

<body>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
        body {
            margin: 0;
            padding: 0;
            color: #fff;
            font-family: 'Montserrat', sans-serif;
            font-weight: 400;
        }
        #wrapper {
            background: #23292D;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        h1{
            font-weight: 400;
            font-size: 3rem;
        }

        a.button{
            display: inline-block;
            padding: 8px 16px;
            background-color: #f5f5f5;
            text-decoration: none;
            border-radius: 20px;
            transition: all 0.25s ease;
        }
        a.button.messenger{
            background: #0099FF;
            color: #fff;
        }
        a.button.messenger:hover{
            background: #097ac5;
        }
        a.button.youtube{
            background: #CD201F;
            color: #fff;
        }
        a.button.youtube:hover{
            background: #961919;
        }


    </style>
    <div id="wrapper">
        <h1>Tạo link icon button css</h1>
        <div class="list-button">
            <a href="#" class="button messenger">
                <span class="button-icon">
                    <i class="fab fa-facebook-messenger"></i>
                </span>
                <span class="button-text">
                    Chat ngay
                </span>
            </a>
            <a href="#" class="button youtube">
                <span class="button-icon">
                    <i class="fab fa-youtube"></i>
                </span>
                <span class="button-text">
                    Chat ngay
                </span>
            </a>
        </div>

    </div>
</body>

</html>

Bạn thất link icon button thế nào? Bạn hiểu được những chia sẻ trong bài học này chứ? Quá trình xem video bạn có vướng mắc gì hãy để lại ở comment, tôi sẽ dành thời gian hỗ trợ bạn nhiều hơn.

Nếu bạn đang học Html css nhưng không có một lộ trình bài bản bạn có thể tham khảo thêm chương trình Html Css 21 Ngày, hiện tại đã có trên 1038 người theo học và đi làm tốt.

Làm thế nào để học lập trình web đi làm hiệu quả thu nhập từ 8-30tr/tháng?

Tôi thường xuyên gửi những thông tin như thế này cho bạn qua email. Hơn 5000+ người đang nhận thông tin! (Không SPAM)

Mọi người thường xem

Gỡ triệt để phần mềm Visual Studio Code

Gỡ triệt để phần mềm VSC 1. Mở thư mục cài đặt VSC C:\Users\Name\AppData\Local\Programs\Microsoft VS CodeClick uninstoo.exe để gỡ phần mềm 2. Xoá thư mục

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Bạn muốn kiếm tiền từ kỹ năng lập trình web?

Lộ trình 10 bước có nhóm kín kèm cặp và trên 2.500 người học và đã đi làm với thu nhập 8-30tr/tháng

0
Bạn đang nghĩ gì? Hãy để lại bình luận tại đâyx
()
x