Skip to content
No results
Home
Services
About Us
Blog
Contact
All Elements
Unravelly
Home
Services
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