WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML CSS and Javascript Hover Animation Effect
1603
ledoc
Open In Editor
Publish Your Code
Recommended
30 March 2025
World Places (CSS 3d hover)
4 September 2025
CSS Room Door Animation HTML Snippet
9 October 2025
CSS Animation: Loading Circle Effect
HTML
Copy
Hover Light Up Effect Using HTML, CSS & JavaScript
HOVER
CSS
Copy
*{ margin:0; padding:0; box-sizing: border-box; } body { background: #111; display:flex; align-items: center; justify-content: center; min-height: 100vh; } .button-wrap{ margin:10px auto; text-align: center; } .hover-button{ position:relative; box-sizing: border-box; background:rgba(255,255,255,0); border:none; font-size: 1.5rem; color:turquoise; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; overflow:hidden; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; width:200px; height:200px; } .hover-button:before{ --size:0; content:''; position:absolute; left:var(--x); top:var(--y); width:var(--size); height:var(--size); background:radial-gradient(circle closest-side, turquoise, transparent); transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transition:width 0.2s ease, height 0.2s ease; -webkit-transition:width 0.2s ease, height 0.2s ease; -moz-transition:width 0.2s ease, height 0.2s ease; -ms-transition:width 0.2s ease, height 0.2s ease; -o-transition:width 0.2s ease, height 0.2s ease; } .hover-button:hover:before{ --size:200px; } .hover-button:hover{ color:#111; cursor: none; } .hover-button span{ position:relative; font-weight:bold; }
JS
Copy
var btn = document.querySelector('.hover-button'); btn.onmousemove = function(e) { var x = e.pageX - btn.offsetLeft; var y = e.pageY - btn.offsetTop; btn.style.setProperty('--x', x + 'px'); btn.style.setProperty('--y', y + 'px'); }