Tạo Link Icon Button Với Html Css - .vn
Có thể bạn quan tâm
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.
Từ khóa » Chèn Icon Vào Button Trong Html
-
HTML / CSS Làm Cách Nào để Thêm Biểu Tượng Hình ảnh Vào Input ...
-
Thêm Button Có Icon Cho Website Sử Dụng Font Awesome | HuyDC Blog
-
Tạo Link Icon Button Với Css Dễ Dàng | - YouTube
-
Một Số Button Với Icon Bằng Css Cho Blog/website
-
Top 15 Chèn Hình Vào Button Html
-
Tổng Hợp Cách Chèn Link Vào Button Trong Html Mới Nhất 2020
-
Hướng Dẫn Tạo Icon Bar Với HTML, CSS Và Javascript
-
Thêm Một Biểu Tượng Vào Nút Thêm Vào Giỏ Hàng - WooCommerce
-
11 Button Social For Thiết Kế Website - Niềm Vui Lập Trình
-
Cập Nhật Chèn ảnh Vào Button Html Mới Nhất ? - Bật Bảo Vệ Avatar Fb
-
Hướng Dẫn Thêm Icon Vào Button Trong Giao Diện Flatsome
-
Cách Thêm Icon Vào Nút Trong Gutenberg - TitanWeb
-
Bootstrap Case: Thêm Nút Button Và Icon
-
How To Create Icon Buttons - W3Schools