.container{
 position: absolute;
 width: 900px;
 top: 50%;
 left: 50%;
 display: flex;
 transform: translate(-50%,-50%);
 justify-content: space-around
}
button{
 position: relative;
 width: 350px;
 height: 80px;
 border-radius: 10px;
 border: none;
 background: none;
 outline: none;
 font-size: 38px;
 font-family: impact;
 color: white
}
button:before{
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: -1;
 background: blue;
 content: ''
}
button:hover{
 animation: squish 0.5s
}

button:hover:before{
 background: linear-gradient(to right, green, tan, aqua);
 filter: url('#wave')
}

@keyframes squish{
 0%{transform: scaleY(1)}
 60%{transform: scaleY(1.5)}
 80%{transform: scaleY(0.9)}
 100%{transform: scaleY(1)}
}



/* *{
 margin: 0;
 padding: 0;
 box-sizing: border-box
}

canvas{
 position: absolute;
 top: 0;
 left: 0;
 background: black
} */


/* body{
 background: black
}

#imgManip{
 width: 888px;
 height: 450px;
 position: absolute;
 border: 3px solid white;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%)
} */