<button>This is shiny!</button>
:root {
/* these are used in JS as well! */
--bg-color: rgba(46, 161, 182, 0.25);
--ripple-color: #2ea1b6;
}
/* just for demo purposes... */
body {
background: linear-gradient(180deg, #040f11 0%, #162b30 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
button {
background-color: var(--bg-color);
color: #dcf3ff;
border: 1px solid #6e92a0;
padding: 12px;
}
const button = document.getElementsByTagName("button")[0];
button.addEventListener("mousemove", (e) => {
const rect = button.getBoundingClientRect();
const x = ((e.clientX - rect.left) / button.clientWidth) * 100;
const y = ((e.clientY - rect.top) / button.clientHeight) * 100;
button.style.background = `radial-gradient(circle closest-corner
at ${x}% ${y}%,
var(--ripple-color), var(--bg-color))`;
});
button.addEventListener("mouseleave", (event) => {
button.style.removeProperty("background");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.