thực hành - tạo button với icon

Trong bài thực hành này, chúng ta sẽ tạo nút button với các biểu tượng icon bằng HTML và CSS

Button với biểu tượng icon

Tạo button với biểu tượng icon

Bước 1) Thêm HTML:

Ví dụ

<!-- Liên kết thư viện font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="containerx">
    <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-twitter"></a>
    <a href="#" class="fa fa-google"></a>
    ...
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Vùng chứa với chiều rộng 100% */
.containerx {
    width:auto;    
}
/* Tạo kiểu chung cho các icon */
.containerx .fa {
    padding:15px 20px;
    text-decoration:none;
    font-size:30px;    
    color:white;
    margin:5px 3px;
    text-align:center;
}
/* Thêm hiệu ứng khi hover chuột */
.containerx .fa:hover {
    opacity:0.6;    
}
/* Tạo màu nền chi tiết cho các icon */
.containerx .fa-facebook { background-color:#3b5998;}
.containerx .fa-twitter { background-color:#55acee;}
.containerx .fa-...

Xem kết quả

Thêm thuộc tính border-radius: 50%; để tạo đường viền hình tròn cho các biểu tượng icon

Ví dụ

/* Tạo kiểu chung cho các icon */
.containerx .fa {
    padding:20px;
    text-decoration:none;
    font-size:30px;    
    color:white;
    margin:5px 3px;
    text-align:center;
    border-radius:50%;
}