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.
