Category: Học HTML

Bà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:

Cửa hàng

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.

<a class="button" href="https://kenhtinhoc.vn/shop/">Cửa hàng</a>

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.

Cửa hàng

Đầ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”

<a class="blue_button" href="https://kenhtinhoc.vn/shop/">Cửa hàng</a>

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.

/* 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 */
}