LÀM THẾ NÀO - Nút Tải xuống
Tìm hiểu cách tạo kiểu cho các nút tải xuống bằng CSS.
Chiều rộng tự động:
Chiều rộng đầy đủ:
Cách tạo các nút tải xuống
Bước 1) Thêm HTML:
Thêm thư viện biểu tượng, chẳng hạn như phông chữ tuyệt vời và nối các biểu tượng vào các nút HTML:
Thí dụ
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Auto width -->
<button class="btn"><i class="fa fa-download"></i> Download</button>
<!-- Full width -->
<button class="btn"
style="width:100%"><i class="fa fa-download"></i> Download</button>
Bước 2) Thêm CSS:
Thí dụ
/* Style buttons */
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
Mẹo: Đi tới Hướng dẫn về biểu tượng của chúng tôi để tìm hiểu thêm về các biểu tượng.
Đi tới Hướng dẫn về các nút CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho các nút.