Simple CSS Gradient Button Animation

Simple CSS Gradient Button Animation (Tutorial + Free Code)

This is an easy tutorial where you will learn how to create a Gradient Button using CSS.

You will see this type of Gradient Button or Gradient text on different websites and applications. It’s easy to get someone’s attention. 🎯

Simple CSS Gradient Button Animation

You can easily make it with a small amount of HTML and CSS. I have already made one more such design.

 So here I will show you how to make Gradient Button Animation in a slightly different way. Many types of colors have been used here. The colors revolve around the center of the button. Undoubtedly it is much more interesting and it is much more beautiful to look at than the normal CSS Gradient Button. 

Of course, under normal circumstances, no animation can be noticed in them. Animation can only be noticed whenever this button is clicked or the mouse is moved over it. Below I have given a live demo of it which will help you understand how it works.

See the Pen
CSS Gradient Button by Foolish Developer (@fghty)
on CodePen.

Hopefully, the above demo has helped you to know how this animated Gradient Button has been created. 

How to Create CSS Gradient Buttons With Hover effect

I have given you my complete tutorial which will help you to know about the work of each element. If you want to download the required source code, you can use the download button at the bottom of the article. Before sharing the tutorial, let me give you some information about this button. 

First I created buttons using HTML’s button tags. Then I did the basic design with the help of CSS code. I created all kinds of animations using after and before effects. I first added text to it using After. Then using before I used different colors. I animated it using animation at the end of it all.

Let’s learn how to make the CSS Gradient Button step by step. 

Step 1: Design the web page

I designed the web page using this small amount of CSS code below.

*,
*:before,
*:after{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
    background-color: #232831;
}
Design the web page

Step 2: Create a button using HTML CSS

I will create and design the button using this HTML and CSS code. I have used the width of this button 320px and height 100px and the background color is completely transparent. Here we have used box-shadow to create a shadow around this button.

<button></button>
button{
    height: 100px;
    width: 320px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 7px;
    outline: none;
    background-color: rgba(255,255,255,0.06);
    box-shadow: 20px 20px 30px rgba(0,0,0,0.1);
    border: none;
    overflow: hidden;
}
Create a button using HTML CSS

Step 3: Add text to the Gradient Button

Now using before I have added a test in it. I have used font-size: 25px to increase the size of the text. I used backdrop-filter: blur (10px) to use some blur. blur made this animation even more interesting.

button:before{
    content: “ANIMATION”;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    font-family: ‘Poppins’,sans-serif;
    font-size: 25px;
    letter-spacing: 6px;
    font-weight: 700;
    padding: 32px 0;
    color: #fcfcfc;
    backdrop-filter: blur(10px);
    cursor: pointer;
}
Add text to the Gradient Button

Step 4: Add different colors to the button

Now I have added different colors using After.

button:after{
    content: “”;
    height: 500px;
    width: 500px;
    position: absolute;
    left: -90px;
    top: -200px;
    z-index: -1;
    background-image: conic-gradient(
        #ff2e4e,
        #d960ff,
        #9264ff,
        #00b3f9,
        #06cd69,
        #ffcd00,
        #ff5c22,
        #ff2e4e
    );
}
How to Create CSS Gradient Buttons With Hover effect

Step 5: Add animations to the Gradient Button

As you can see in the picture above, this button has been made completely colorful. I used CSS’s animation tags to add animations. This animation basically rotates the colors around the center of the button. It takes a total of two seconds to rotate and it rotates to infinity.

I used @keyframes to make this rotation work. Using @keyframes, I instructed the colors to rotate 360 ​​degrees. An animation can be seen here as it will continue to rotate to Infinity.

button:hover:after{
    animation: spin 2s linear infinite;
}
@keyframes spin{
    100%{
        transform: rotate(360deg);
    }
}

Hopefully, this tutorial above has helped you to know how to create this CSS Gradient Button Animation. 

This is a simple and easy tutorial that will help you create an animated Gradient Button very easily. Below I have given the complete source code which you can download and use in your own work.

",t.style.display="none")},1e3)}