CÁCH LÀM - Các 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 các 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:
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 -->
<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:
Thí 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;
}
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.