Animated Gradient Button on Hover

byCodingFlicks -June 18, 2023

0

Buttons are an essential part of any website. Because it indicates to users that an action can be performed by clicking or tapping the button. Buttons on a website can be of different shapes, sizes, and styles. Buttons are given different colors, gradients, shadows, and animations to make them visually appealing. In our today's blog, we will show how to create an animated gradient button on hover. You can watch the video demo below to see how the button hover animation will look. Our website has many projects like CSS animation, landing page design, etc. To visit them, click on the Load More button below our website homepage.

Video Demo:

Hope you have seen the video demo. Adding animation to website buttons is a good idea to add interactivity and engagement. An animated button always looks more attractive to a visitor than a static type button and it helps to increase user interaction. An animated gradient button on hover could be a nice example of that. With this in mind, we added a four-color gradient animation to our button. As we all know, CSS gradient is a powerful feature of CSS that helps us to make a smooth transition between two or more colors. This interesting feature is used to add depth, dimension, and visual interest to any element of a website or app.

You May Also Like:

Animated Gradient Button on Hover [ Source Code ]:

To create this Animated Gradient Button on Hover you will need to create an HTML and a CSS file. After that copy and paste the following codes into your project. In case of any malfunction, you can download the same code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Gradient Button on Hover</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="btn-area">
            <div class="btn-animation"></div>
            <button>Learn More</button>
        </div>
    </div>
</body>
</html>

ADD CSS:

*{
    margin: 0;
    padding: 0;
}
body {
	background: #131313;
}
.wrapper{
    display: grid;
    place-items: center;
    height: 100vh;
}
.wrapper .btn-area{
    position: relative;
    height: 80px;
    width: 300px;
    border-radius: 50px;
    margin-top: 30px;
    overflow: hidden;
  }
  .wrapper .btn-area .btn-animation{
    position: absolute;
    height: 100%;
    width: 350%;
    left: -100%;
    background-image: linear-gradient(135deg,#9708CC, #43CBFF,#9708CC, #43CBFF );
    transition: all 0.8s ease;
    border-radius: 50px;
  }
  .wrapper .btn-area:hover .btn-animation{
    left: 0;
  }
  .wrapper .btn-area button{
    position: relative;
    height: 100%;
    width: 100%;
    background: none;
    outline: none;
    border: none;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
  }

We hope this Animated gradient Button on hover snippet is working for you. If you think the content of this website helped you, then you can share it with others. Thank you for visiting the website.

DOWNLOAD CODE

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