Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Gradient Hover Effect

Gradient Hover Effect

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('');
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment