Skip to content
No results
Home
About Us
Blog
Contact
All Elements
Unravelly
Home
About Us
Blog
Contact
All Elements
Search
Unravelly
Search
Menu
Glowing stars button
HTML
CSS
<button class="glow-btn">Hover Me</button>
Copy
.glow-btn { padding: 15px 30px; font-size: 16px; color: white; background-color: #3498db; border: none; border-radius: 5px; cursor: pointer; position: relative; overflow: hidden; transition: background-color 0.3s ease, box-shadow 0.3s ease; z-index: 1; } .glow-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://unravelly.com/wp-content/uploads/2024/07/Glowing-Stars-bg-for-button.webp'); /* Replace with your PNG image path */ background-size: cover; opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .glow-btn:hover { background-color: #2a2a2a; box-shadow: 0 0 15px rgba(36, 36, 36, 0.6); } .glow-btn:hover::before { opacity: 1; }
Copy
Preview Area
Latest UI Buttons
Hover Me
< /> View Code
Hover me
That's Great
< /> View Code
Booking now
< /> View Code