Làm thế nào để - Tải các nút
Tìm hiểu cách tạo các nút tải bằng CSS.
Cách tạo kiểu cho các nút tải
Bước 1) Thêm HTML:
Thêm thư viện biểu tượng, chẳng hạn như Font Awesome 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">
<!-- Add font awesome icons to buttons (note that the fa-spin class
rotates the icon) -->
<button class="buttonload">
<i class="fa fa-spinner fa-spin"></i>Loading
</button>
<button class="buttonload">
<i class="fa fa-circle-o-notch
fa-spin"></i>Loading
</button>
<button class="buttonload">
<i
class="fa fa-refresh fa-spin"></i>Loading
</button>
Bước 2) Thêm CSS:
Thí dụ
/* Style buttons */
.buttonload {
background-color: #04AA6D; /* Green background */
border: none; /* Remove borders */
color: white; /*
White text */
padding: 12px 16px; /* Some padding */
font-size: 16px /* Set a font size */
}
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.
Mẹo: Đi tới Cách thực hiện - Trình tải CSS của chúng tôi để tìm hiểu cách tạo trình tải bằng CSS (không có thư viện 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.