SCSS
$button-height: 80px;
$button-width: 480px;
$press-time: .4s;
html, body{
height: 100%;
width: 100%;
}
body{
background-color: #eee;
position: relative;
margin: 0;
}
.button{
box-shadow: 0px 15px 0 20px #352d2d, 0px 40px 0 30px #000000;
cursor: pointer;
background-color: #c0392b;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
width: $button-width;
height: $button-height;
transform: translateX(-50%);
&::before{
content: '';
z-index: 1;
border-radius: 50%;
background-color: #e74c3c;
position: absolute;
bottom: 100%;
left: 0%;
transition: bottom $press-time;
width: $button-width;
height: $button-height;
}
&::after{
content: '';
background-color: #c0392b;
position: absolute;
bottom: 50%;
left: 0%;
width: $button-width;
height: $button-height;
transition: height $press-time;
}
&:active{
&::before{ bottom: 10%; }
&::after{ height: 10%; }
}
}
