SCSS
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
body {
margin: 0;
background-color: lightskyblue;
}
button {
width: 20vw;
height: 6vw;
position: absolute;
left: 50vw;
top: 50vh;
transform: translate(-50%,-80%);
font-family: 'Varela Round', sans-serif;
font-size: 2vw;
letter-spacing: 0.1em;
color: #e8e8e8;
border: none;
border-radius: 10px;
background: linear-gradient(45deg,#d350db,teal,#d350db);
background-size: 400% 400%;
box-shadow: 1vw 1vw 0 lightcoral;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
animation: gradient 10s ease infinite;
font-size: 2.05vw;
box-shadow: 0.2vw 0.2vw 0 lightcoral;
}
}
@keyframes gradient {
50% {
background-position: 100% 0;
}
}
