CSS
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.button{
position: relative;
background-color: #ffffff;
border: 1px #b0b0b0 solid;
border-radius: 3px;
width: 100px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
overflow: hidden;
user-select: none;
transition: 0.5s box-shadow;
}
.button:hover {
box-shadow: 0px 0px 20px 5px #e0dde6;
}
.button > span {
z-index: 2;
}
.button-disable{
position: absolute;
background-color: #d5cae6;
transform: scale(0);
border-radius: 50%;
transition: 0.5s transform ease-out;
}
.button-pressed {
transform: scale(0.5);
}
.button-active {
transform: scale(2);
}
JAVASCRIPT
const button = document.getElementById('butt');
const shadow = document.getElementById('shadow');
const state = {active: false};
button.addEventListener('mousedown', (e) => {
animation(e, button, shadow);
if(state.active) {
shadow.classList.remove("button-active");
} else {
shadow.classList.add("button-pressed");
}
});
button.addEventListener('mouseup', (e) => {
animation(e, button, shadow);
if(state.active) {
shadow.classList.remove("button-pressed");
} else {
shadow.classList.add("button-active");
}
state.active = !state.active;
});
button.addEventListener('mouseleave', (e) => {
animation(e, button, shadow);
if(!state.active) {
shadow.classList.remove("button-pressed");
} else {
shadow.classList.add("button-active");
}
});
button.addEventListener('mousemove', (e) => {
animation(e, button, shadow);
});
animation = (e, button, shadow) => {
const x = e.pageX - button.offsetLeft;
const y = e.pageY - button.offsetTop;
const diameter = Math.max(button.offsetWidth, button.offsetHeight);
shadow.style.height = shadow.style.width = `${diameter}px`;
shadow.style.left = `${x - shadow.offsetWidth/2}px`;
shadow.style.top = `${y - shadow.offsetHeight/2}px`;
}
