WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Hover Button Animation CSS
2521
lebdev
Open In Editor
Publish Your Code
Recommended
16 October 2025
CSS Animation Examples: Loading, Cubes, Spheres
25 August 2024
Onscroll Animation: Dynamic Content Scroll with ScrollMagic
4 September 2025
CSS Circle Animation HTML Snippet
HTML
Copy
Hover Me
CSS
Copy
:root{ --color: #95f9fe; } * { margin: 0; padding:0; box-sizing: border-box; } body { background: #252525; color: #fff; display: flex; align-items: center; justify-content: center; height: 100vh; } button { position: relative; padding: 12px 35px; background: var(--color); font-size: 17px; font-weight: 500; color: #181818; border: 3px solid var(--color); border-radius: 8px; box-shadow: 0 0 0 #fec1958c; transition: all .3s ease-in-out; cursor: pointer; } .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); } .star-2 { position: absolute; top: 45%; left: 45%; width: 15px; height: auto; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); } .star-3 { position: absolute; top: 40%; left: 40%; width: 5px; height: auto; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); } .star-4 { position: absolute; top: 20%; left: 40%; width: 8px; height: auto; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all .8s cubic-bezier(0, 0.4, 0, 1.01); } .star-5 { position: absolute; top: 25%; left: 45%; width: 15px; height: auto; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all .6s cubic-bezier(0, 0.4, 0, 1.01); } .star-6 { position: absolute; top: 5%; left: 50%; width: 5px; height: auto; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all .8s ease; } button:hover { background: transparent; color: var(--color); box-shadow: 0 0 25px #fec1958c; } button:hover .star-1 { position: absolute; top: -80%; left: -30%; width: 25px; height: auto; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; } button:hover .star-2 { position: absolute; top: -25%; left: 10%; width: 15px; height: auto; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; } button:hover .star-3 { position: absolute; top: 55%; left: 25%; width: 5px; height: auto; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; } button:hover .star-4 { position: absolute; top: 30%; left: 80%; width: 8px; height: auto; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; } button:hover .star-5 { position: absolute; top: 25%; left: 115%; width: 15px; height: auto; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; } button:hover .star-6 { position: absolute; top: 5%; left: 60%; width: 5px; height: auto; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; } .fil0 { fill: #FFFDEF }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */