Cách thực hiện - 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 đủ:
Hãy tự mình thử »
Cách tạo 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:
Ví 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:
Ví 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;
}
Hãy tự mình thử »Mẹo: Đi tới Hướng dẫn biểu tượng của chúng tôi để tìm hiểu thêm về biểu tượng.
Đi tới Hướng dẫn về 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.