PC Gaming
Laptop
Laptop Gaming
Bộ nhớ lưu trữ
Linh kiện PC
Màn hình máy tính
Bàn phím
Chuột – Lót chuột
Tai nghe – Loa – Micro
Ghế – Bàn
Phụ kiện
Mạng – Camera
Thiết bị văn phòngBài này mình sẽ hướng dẫn cách tạo nút (button) trong WordPress bằng code, để nhúng vô bài viết hoặc trang. Mà không cần plugin.
Xài code có thể không tiện lợi lắm nhưng được cái là nhẹ web.
Tạo nút cơ bản
Ví dụ bạn muốn tạo một nút như thế này:
Thì chỉ cần copy đoạn code này vô bài viết của bạn, thay link và chữ lại theo ý bạn là được.
[html] <a class=”button” href=”https://kenhtinhoc.vn/shop/”>Cửa hàng</a>[/html]
Mấu chốt ở chỗ: Nó chỉ là cách chèn link vô chữ thông thường thôi, chỉ cần thêm class=”button” là nó sẽ ra nút.
Tạo nút nâng cao
Nút này màu mè hơn một chút nên sẽ cần bạn làm nhiều hơn.
Đầu tiên cũng copy đoạn code này vô bài. Khác chút là đặt class khác, ví dụ mình đặt là “blue_button”
[html] <a class=”blue_button” href=”https://kenhtinhoc.vn/shop/”>Cửa hàng</a>[/html]
Sau đó điền thêm CSS vô web để trang trí cho cái nút đó. Nội dung mình đã chú thích trong từng dòng code bên dưới.
Giải thích:
– .blue_button { }: Class của mình là blue_button nên mình khởi đầu bằng .blue_button.
– .blue_button:hover { }: Là hiệu ứng khi di chuột lên blue_button.
[css] /* Blue Button – Nút màu xanh dương */.blue_button {
background-color: #1e73be; /* Màu nền */
border: none; /* Viền */
color: white; /* Màu chữ */
padding: 12px 20px; /* Vùng đệm */
text-align: center; /* Căn chỉnh chữ */
text-decoration: none; /* Trang trí chữ */
font-size: 16px; /* Kích thước chữ */
border-radius: 25px; /* Bo góc */
}
.blue_button:hover {
background-color: #145aa5; /* Màu nền khi di chuột */
color: white; /* Màu chữ khi di chuột */
}
[/css]
