Made this button hover effect using CSS animations and gradients. Hope you like it!
A Pen by Chris Colvin on CodePen.
Made this button hover effect using CSS animations and gradients. Hope you like it!
A Pen by Chris Colvin on CodePen.
<button>Hover Me</button> |
@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; | |
outline: none; | |
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; | |
} | |
} |