[Share Code] Tạo Button Ngôi sao lan tỏa

Mã này tạo ra một nút bấm (button) có hiệu ứng đặc biệt khi di chuột vào. Xung quanh nút có các hình ngôi sao SVG, khi hover vào nút, các ngôi sao sẽ di chuyển và phát sáng tạo hiệu ứng lung linh.

Tải về bộ source Button ngôi sao lan tỏa tại đây (Google Drive)

Phân tích HTML

<div class="buimanhduc-com">
  <button>
      Button
      <div class="star-1">...</div>
      <div class="star-2">...</div>
      <div class="star-3">...</div>
      <div class="star-4">...</div>
      <div class="star-5">...</div>
      <div class="star-6">...</div>
  </button>
</div>

<div class="buimanhduc-com">: Đây là khung chứa chính, có nền gradient đẹp.

<button>: Nút bấm chính, có chữ “Button”.

Các <div class="star-x">: 6 ngôi sao SVG (vector) được thêm vào để tạo hiệu ứng trang trí.

Mỗi ngôi sao (.star-1 đến .star-6) sử dụng cùng một SVG hình ngôi sao, được định vị khác nhau để tạo bố cục lung linh.

Phân tích CSS

Cấu trúc nền và căn giữa

body {
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

Màu nền đen. Căn giữa nội dung theo cả chiều ngang lẫn chiều dọc.

.buimanhduc-com {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
width: 100%;
background: linear-gradient(135deg, #c57eff, #b375ff, #6300FF);
}

Chiều cao: 400px, kéo dài toàn bộ chiều rộng (width: 100%). Nền gradient màu tím-xanh tạo hiệu ứng đẹp.

Nút Button

button {
position: relative;
padding: 12px 35px;
background: #fec195;
font-size: 17px;
font-weight: 500;
color: #181818;
border: 3px solid #fec195;
border-radius: 8px;
box-shadow: 0 0 0 #fec1958c;
transition: all 0.3s ease-in-out;
cursor: pointer;
}

Màu nền: Cam nhạt #fec195.

Viền: Màu cam cùng với nền (border: 3px solid #fec195).

Bo tròn góc (border-radius: 8px).

Hiệu ứng hover mượt mà (transition: all 0.3s ease-in-out).

Định vị ngôi sao

Mỗi .star-x có vị trí khác nhau xung quanh nút. Ví dụ:

.star-1 {
position: absolute;
top: 20%;
left: 20%;
width: 25px;
height: auto;
filter: drop-shadow(0 0 0 #fffdef);
z-index: -5;
transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}

• position: absolute; giúp định vị ngôi sao tương đối với nút button.
• top và left điều chỉnh vị trí của ngôi sao.
• width: 25px; – kích thước ngôi sao.
• filter: drop-shadow(0 0 0 #fffdef); – tạo bóng sáng, mặc định chưa sáng (0px).
• z-index: -5; – đặt sau nút button.
• transition giúp tạo hiệu ứng di chuyển khi hover.

Các .star-2 đến .star-6 có vị trí và kích thước khác nhau để tạo bố cục đẹp.

Hiệu ứng Hover

Khi di chuột vào nút

button:hover {
    background: transparent;
    color: #fec195;
    box-shadow: 0 0 25px #fec1958c;
}

• Nền biến mất (background: transparent;).
• Chữ đổi màu (color: #fec195;).
• Tỏa sáng (box-shadow: 0 0 25px #fec1958c;).

Di chuyển các ngôi sao

button:hover .star-1 {
    top: -80%;
    left: -30%;
    filter: drop-shadow(0 0 10px #fffdef);
    z-index: 2;
}

• Ngôi sao số 1 bay lên trên và sang trái (top: -80%; left: -30%;).
• Tỏa sáng mạnh (filter: drop-shadow(0 0 10px #fffdef);).
• Lên trên các phần tử khác (z-index: 2;).

Tương tự với .star-2, .star-3…, tạo hiệu ứng sao bay lung linh.

Tổng kết

Nút bấm có hiệu ứng đẹp: đổi màu khi hover.

Các ngôi sao di chuyển & phát sáng khi hover, tạo cảm giác lung linh.

Dùng SVG, filter: drop-shadow, transition để tạo hiệu ứng mượt mà.