Hướng Dẫn Tạo Button Phát Sáng Động Với Elementor

Hôm nay mình sẽ hướng dẫn các bạn tạo Button ( nút ) có ánh sáng chạy quanh nút với Elementor.

Với hoạt ảnh phát sáng trên Button sẽ giúp nổi bật và thu hút nhiều sự chú ý hơn. Từ đây bạn sẽ tăng được tỉ lệ click, giúp điều hướng người dùng tốt hơn và mang lại nhiều chuyển đổi hơn so với một button ( nút ) thông thường.

Tại đây mình chỉ hướng dẫn với Elementor, tuy nhiên bạn hoàn toàn có thể sử dụng CSS này cho các loại builder khác và đều có thể sử dụng được.

Bước 1 – Thêm nút (button) trên thanh công cụ

1. Kéo và thả tiện ích Nút : Trong Elementor, kéo tiện ích Nút vào phần bạn mong muốn.
2. Truy cập Cài đặt nâng cao : Nhấp vào nút để mở bảng cài đặt. Điều hướng đến tab Nâng cao .
3. Chỉ định một lớp CSS : Trong trường Lớp CSS , nhập galactic-button. Lớp này sẽ được sử dụng để áp dụng CSS tùy chỉnh.

Bước 2 – Thêm CSS tùy chỉnh vào khu vực nút hoặc trang

Tuỳ vào trường hợp các bạn đang sử dụng Elementor nào thì mới có thể áp dụng được.

Hiện tại nếu trường hợp các bạn sử dụng bản Elementor miễn phí thì nên xem các thêm CSS vào khu vực toàn trang còn nếu dùng bản Elementor Pro thì có sử dụng thêm trực tiếp tại Button đang CSS

Hướng dẫn thêm CSS tuỳ chỉnh vào khu vực tuỳ chỉnh trang

Tại khu vực Tuỳ chỉnh, bạn chọn CSS bổ sung

Ngay sau khi chọn CSS bổ sung, các bạn điền đoạn mã mình cung cấp bên dưới vào

Hướng dẫn thêm CSS tuỳ chỉnh vào khu vực nút

Bạn click vào nút và chọn “Nâng cao”, tiếp tục kéo dưới cùng và điền mã mình cung cấp vào khu vực “Tuỳ chỉnh CSS”

CSS:

				
					/* Giữ nút nằm trên hiệu ứng phát sáng */
.galactic-button {
  z-index: 1;
}

/* CSS cho hiệu ứng phát sáng */
.galactic-button:before {
  content: '';
  position: absolute;
  z-index: -1; /* Đặt hiệu ứng dưới nút */
  top: 50%; /* Căn giữa theo chiều dọc */
  left: 50%; /* Căn giữa theo chiều ngang */
  transform: translate(-50%, -50%); /* Điều chỉnh để tâm hiệu ứng trùng với tâm nút */
  border-radius: 50%; /* Tạo hiệu ứng hình tròn */
  pointer-events: none; /* Vô hiệu hóa sự kiện chuột trên hiệu ứng */
  width: 200px; /* Điều chỉnh chiều rộng */
  height: 200px; /* Điều chỉnh chiều cao */
  background: conic-gradient(from 0deg, #ff007f, #ffbf00, #00ffbf, #00d4ff, #ff007f); /* Tùy chỉnh màu sắc */
  animation: swirl 3s infinite linear; /* Tùy chỉnh tốc độ và kiểu hoạt ảnh */
  filter: blur(50px); /* Tùy chỉnh độ mờ */
  opacity: 0.5; /* Tùy chỉnh độ trong suốt */
}

/* Hoạt ảnh xoay vòng */
@keyframes swirl {
  0% {
    transform: translate(-50%, -50%) rotate(0deg); /* Bắt đầu từ góc 0 */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg); /* Kết thúc tại góc 360 */
  }
}

				
			

Bước 3 – Tuỳ chỉnh hiệu ứng của Button (nút)

CSS mình cung cấp có thể tùy chỉnh hoàn toàn. Tuy nhiên bạn phải để ý khu vực /* */, đây là các chú thích ở đó để giúp hướng dẫn bạn và những gì và nơi để thực hiện các điều chỉnh của bạn. Nếu bạn mới làm quen với CSS thì nên xem video hoặc tìm hiểu thêm với chatGPT để được giải thích chuẩn nhất.

Dưới đây mình sẽ hỗ trợ bạn làm sao có thể tuỳ chỉnh tốt nhất:

Tuỳ chỉnh kích thước và ánh sáng

• Thuộc tính: width và height
• Mặc định :200px
• Lưu ý : Để làm cho ánh sáng lớn hơn, hãy tăng cả hai giá trị width và heightbằng nhau. Ví dụ, thay đổi width: 200px;và height: 200px;thành width: 300px;và height: 300px;. Đảm bảo cả hai giá trị đều giống nhau để duy trì hình tròn.

Tuỳ chỉnh màu sắc

• Thuộc tính :background
• Mặc định :conic-gradient(from 0deg, #ff007f, #ffbf00, #00ffbf, #00d4ff, #ff007f)
• Lưu ý : Để thay đổi màu của vòng xoáy, hãy thay thế mã màu hex trong conic-gradient. Ví dụ, để sử dụng các sắc thái của màu xanh lam, bạn có thể đặt thành background: conic-gradient(from 0deg, #0000ff, #00ffff, #0000ff);. Bạn có thể tìm mã màu hex bằng công cụ chọn màu hoặc trình soạn thảo mã miễn phí như Visual Studio Code.

Tuỳ chỉnh tốc độ hoạt ảnh

• Thuộc tính :animation
• Mặc định :3s
• Lưu ý: Để điều chỉnh tốc độ xoáy, hãy thay đổi giá trị thời lượng trong animationthuộc tính. Để quay chậm hơn, hãy tăng thời gian; ví dụ, đổi animation: swirl 3s infinite linear;thành animation: swirl 5s infinite linear;. Để quay nhanh hơn, hãy giảm thời gian; ví dụ, animation: swirl 2s infinite linear;.

Tuỳ chỉnh cường độ

• Thuộc tính :filter: blur()
• Mặc định :50px
• Lưu ý : Để làm cho ánh sáng khuếch tán hơn, hãy tăng giá trị làm mờ. Ví dụ, đổi filter: blur(50px);thành filter: blur(70px);. Để làm cho nó sắc nét hơn, hãy giảm giá trị làm mờ; ví dụ,filter:

Tuỳ chỉnh mức độ mờ

• Thuộc tính :opacity
• Mặc định :0.5
• Lưu ý: Để làm cho ánh sáng trong suốt hơn, hãy giảm giá trị độ mờ đục. Ví dụ, đổi opacity: 0.5;thành opacity: 0.3;. Để làm cho nó mờ đục hơn, hãy tăng giá trị; ví dụ, opacity: 0.7;.