Skip to content

Instantly share code, notes, and snippets.

Created June 28, 2017 14:25
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
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