CSS Gradient Button Hover animation

byCodingFlicks -October 06, 2022

0

Today we will share a snippet about the CSS button. In this project, we will create gradient animation on hover over each button. We can make these beautiful CSS animation examples only with HTML and CSS. Watch the video demo before collecting the source code. Copy and paste the source code below into your project. Experiment with the gradient color used here by changing it as per your wish.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
    <meta charset="UTF-8">
    <title>Creative Gradient Button Hover Animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <a href="#">Facebook</a>
        <a href="#">Twitter</a>
        <a href="#">Instagram</a>
        <a href="#">Dribbble</a>
    </div>
</body>
</html>

ADD CSS:

  *{
    margin: 0;
    padding: 0;
}
body {
	background-color: #000;
	display: grid;
	place-content: center;
	height: 100vh;
}
.wrapper a {
	position: relative;
    font-size: 20px;
	box-sizing: border-box;
	background: linear-gradient(45deg, yellow, blue, green, red);
	background-size: 500%;
	border-radius: 50px;
	z-index: 1;
	padding: 15px 30px;
	margin: 0 15px;
	font-weight: 500;
	overflow: hidden;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	text-decoration: none;
	line-height: 60px;
	color: #fff;	
}
 
.wrapper a:before{
  content: '';
  position: absolute;
  z-index: -1;
  background: linear-gradient(45deg, red, green, blue, yellow);
  background-size: 500%;
  border-radius: 50px;
  opacity: 0;
  transition: 0.5s;
}

.wrapper a:hover{
  color: #fff;
  text-decoration: none;
  animation: animate 10s linear infinite;
}
 
.wrapper a:hover:before{
  opacity: 1;
  animation: animate 10s linear infinite;
}
@keyframes animate
{
  0%
  {
    background-position: 0%;
  }
  100%
  {
    background-position: 500%;
  }
}

Hope you got the code right. On our website, you can find many source codes for CSS animations. Click on the Load More button below the home page to get these codes. We'd like to thank you for visiting our website.

Please do not enter any spam link in the comment box.