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.

Đề xuất cho bạn

Subscribe
Notify of
guest

0 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments

Tặng Ebook chia sẻ kinh nghiệm học lập trình web đi làm cho người mới bắt đầu!

Đây là tấm bản đồ chia sẻ lại cách học lập trình web đi làm đã giúp nhiều học trò của unitop kiếm được thu nhập từ 8-30tr mỗi tháng.

Ebook Bí quyết học lập trình web đi làm - Phan Văn Cương - Unitop.vn
0
Bạn đang nghĩ gì? Hãy để lại bình luận tại đâyx
()
x