Thêm CSS ghost button đẹp WordPress

2 tháng ago, WordPress Themes, 1 Views

Thêm CSS Ghost Button Đẹp Cho WordPress: Hướng Dẫn Chi Tiết

Ghost button, hay còn gọi là nút ma, là một kiểu thiết kế nút hiện đại và tối giản, chỉ có đường viền và text, thường là trong suốt hoặc có màu nền nhạt. Chúng đang ngày càng phổ biến trong thiết kế website vì vẻ đẹp tinh tế, khả năng tương thích với nhiều phong cách thiết kế, và giúp tập trung sự chú ý vào nội dung chính. Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách thêm CSS ghost button đẹp cho website WordPress của bạn.

Tại Sao Nên Sử Dụng Ghost Button?

Ghost button mang lại nhiều lợi ích cho thiết kế website, bao gồm:

Tính thẩm mỹ cao: Thiết kế đơn giản và hiện đại giúp website trở nên chuyên nghiệp và thu hút hơn.
Tập trung vào nội dung: Do nút có thiết kế nhẹ nhàng, nó không làm xao nhãng sự chú ý của người dùng khỏi nội dung chính của trang web.
Dễ tùy chỉnh: Ghost button dễ dàng được tùy chỉnh về màu sắc, kích thước, và kiểu chữ để phù hợp với phong cách thiết kế tổng thể của website.
Khả năng tương thích: Phù hợp với nhiều loại website, từ blog cá nhân đến trang web doanh nghiệp.

Các Bước Thêm Ghost Button Vào WordPress

Có nhiều cách để thêm ghost button vào website WordPress của bạn. Dưới đây là một số phương pháp phổ biến:

1. Sử Dụng CSS Tùy Chỉnh

Đây là phương pháp phổ biến nhất và linh hoạt nhất. Bạn sẽ cần thêm CSS vào theme của bạn để tạo kiểu cho các nút.

Xác định class cho nút: Trước tiên, bạn cần xác định class CSS mà bạn sẽ sử dụng cho các nút ghost. Ví dụ: .ghost-button.
Thêm CSS vào theme: Có nhiều cách để thêm CSS vào theme WordPress của bạn:
- Sử dụng trình tùy biến (Customizer): Vào Appearance > Customize > Additional CSS.
- Chỉnh sửa file style.css của theme: (Không khuyến khích nếu bạn không quen thuộc với code, nên sử dụng theme child).
- Sử dụng plugin CSS tùy chỉnh: Ví dụ: Simple Custom CSS.

Thêm code CSS: Dán đoạn code CSS sau (hoặc chỉnh sửa cho phù hợp) vào vị trí bạn đã chọn:

   
   .ghost-button {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
   }

   .ghost-button:hover {
    background-color: #fff;
    color: #000;
   }

Sử dụng class trong HTML: Khi bạn thêm nút vào trang hoặc bài viết, hãy đảm bảo thêm class ghost-button vào thẻ <a> hoặc <button>. Ví dụ:
```
   
   <a href="#" class="ghost-button">Xem Thêm</a>
   
  
```

2. Sử Dụng Plugin

Có nhiều plugin WordPress có thể giúp bạn tạo ghost button một cách dễ dàng mà không cần code.

Tìm kiếm plugin: Trong trang quản trị WordPress, vào Plugins > Add New và tìm kiếm “button builder” hoặc “ghost button”.
Cài đặt và kích hoạt plugin: Chọn một plugin phù hợp (ví dụ: MaxButtons, Buttonizer) và cài đặt, sau đó kích hoạt nó.
Tạo ghost button: Sử dụng giao diện của plugin để tạo kiểu cho nút của bạn. Thường thì bạn có thể chọn màu sắc, kích thước, kiểu chữ, và hiệu ứng hover.
Thêm nút vào trang: Plugin thường cung cấp shortcode hoặc block Gutenberg để bạn có thể dễ dàng thêm nút vào trang hoặc bài viết.

3. Sử Dụng Gutenberg Blocks

Nếu bạn đang sử dụng trình soạn thảo Gutenberg, bạn có thể tạo ghost button bằng cách tùy chỉnh block “Button”.

Thêm block “Button”: Trong trình soạn thảo Gutenberg, thêm một block “Button”.
Tùy chỉnh màu sắc và kiểu chữ: Trong cài đặt block, bạn có thể thay đổi màu nền, màu chữ, và kiểu chữ.
Loại bỏ màu nền: Để tạo ghost button, hãy đặt màu nền thành “transparent” hoặc một màu nền nhạt gần như trong suốt.
Thêm đường viền: Sử dụng CSS tùy chỉnh (như đã hướng dẫn ở phần 1) để thêm đường viền cho nút. Bạn có thể thêm class CSS vào block “Button” bằng cách sử dụng tab “Advanced”.

Tùy Chỉnh Ghost Button Để Phù Hợp Với Thiết Kế Website

Sau khi đã thêm ghost button vào website, bạn có thể tùy chỉnh nó để phù hợp với phong cách thiết kế tổng thể. Dưới đây là một số yếu tố bạn có thể tùy chỉnh:

Màu sắc: Chọn màu sắc phù hợp với bảng màu của website. Bạn có thể sử dụng màu sắc thương hiệu hoặc các màu sắc tương phản để làm nổi bật nút.
Kiểu chữ: Chọn kiểu chữ dễ đọc và phù hợp với phong cách thiết kế. Kích thước chữ cũng quan trọng, đảm bảo nó đủ lớn để dễ nhìn nhưng không quá lớn gây xao nhãng.
Độ dày đường viền: Điều chỉnh độ dày của đường viền để tạo sự cân bằng với kích thước nút và kiểu chữ.
Hiệu ứng hover: Thêm hiệu ứng hover (ví dụ: thay đổi màu sắc, hiệu ứng đổ bóng) để tạo sự tương tác và thu hút người dùng.
Padding: Điều chỉnh padding (khoảng cách giữa chữ và đường viền) để tạo không gian và làm cho nút dễ nhìn hơn.
Border radius: Thêm border radius (bo góc) để tạo nút tròn trịa hơn, phù hợp với thiết kế mềm mại.

Ví Dụ Code CSS Cho Ghost Button Nâng Cao

Dưới đây là một số ví dụ code CSS nâng cao để tạo ghost button độc đáo:

Ví Dụ 1: Ghost Button Với Hiệu Ứng Gradient Hover

 
 .ghost-button-gradient {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  transition: background-image 0.3s ease, color 0.3s ease;
  background-size: 200% auto;
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 51%, #4facfe 100%);
 }

 .ghost-button-gradient:hover {
  background-position: right center;
  color: #fff;
 }

Ví Dụ 2: Ghost Button Với Hiệu Ứng Đổ Bóng

 
 .ghost-button-shadow {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
 }

 .ghost-button-shadow:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }

Ví Dụ 3: Ghost Button Với Hiệu Ứng Thay Đổi Đường Viền

 
 .ghost-button-border {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
 }

 .ghost-button-border:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
 }

 .ghost-button-border:hover:before {
  transform: scaleX(1);
 }

 .ghost-button-border:hover {
  color: #000;
 }

Lời Khuyên Khi Sử Dụng Ghost Button

Sử dụng đúng mục đích: Ghost button phù hợp với các trang web có nền đơn giản, ít chi tiết. Tránh sử dụng quá nhiều ghost button trên một trang, vì nó có thể làm giảm sự chú ý của người dùng.
Đảm bảo khả năng đọc: Chắc chắn rằng màu chữ và màu nền có độ tương phản đủ để người dùng dễ dàng đọc được nội dung trên nút.
Kiểm tra trên nhiều thiết bị: Kiểm tra ghost button trên nhiều thiết bị (máy tính, điện thoại, máy tính bảng) để đảm bảo nó hiển thị tốt trên mọi kích thước màn hình.
Kết hợp với các yếu tố thiết kế khác: Ghost button nên được kết hợp hài hòa với các yếu tố thiết kế khác trên website, như màu sắc, kiểu chữ, và hình ảnh.

Kết Luận

Ghost button là một lựa chọn tuyệt vời để tạo điểm nhấn cho website WordPress của bạn. Với những hướng dẫn chi tiết và ví dụ code CSS trong bài viết này, bạn có thể dễ dàng thêm ghost button đẹp và chuyên nghiệp vào website của mình. Hãy thử nghiệm và tùy chỉnh để tìm ra phong cách thiết kế phù hợp nhất với thương hiệu của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa