Cách thực hiện - Tải nút
Tìm hiểu cách tạo 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 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">
<!-- 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:
Ví 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 */
}
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.
Mẹo: Đi tới phần 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ề 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.