Cách thực hiện - Nút biểu tượng
Tìm hiểu cách tạo các nút biểu tượng bằng CSS.
Các nút biểu tượng:
Các nút biểu tượng có văn bản:
Cách tạo nút biểu tượ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">
<!-- Add font awesome icons to buttons -->
<p>Icon
buttons:</p>
<button class="btn"><i class="fa fa-home"></i></button>
<button class="btn"><i class="fa fa-bars"></i></button>
<button
class="btn"><i class="fa fa-trash"></i></button>
<button class="btn"><i
class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-folder"></i></button>
<p>Icon buttons with text:</p>
<button class="btn"><i
class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i>
Menu</button>
<button class="btn"><i class="fa fa-trash"></i>
Trash</button>
<button class="btn"><i class="fa fa-close"></i>
Close</button>
<button class="btn"><i class="fa fa-folder"></i>
Folder</button>
Bước 2) Thêm CSS:
Ví dụ
/* Style buttons */
.btn {
background-color: DodgerBlue;
/* Blue background */
border: none; /* Remove borders */
color: white; /*
White text */
padding: 12px 16px; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer;
/* Mouse pointer on hover */
}
/* 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.