Simple Gradient Button Animation using CSS (Free Code)

Simple Gradient Button Animation using CSS

This article will help you to know how to create Gradient Button Animation using HTML and CSS. There are many types of buttons, but the gradient is the most significant. 

Earlier I shared various tutorials like Gradient Button CSS, Neon Button, etc. These designs are much more attractive and beautiful than simple button designs.

Here I have created this Gradient Button Animation using only HTML and CSS. In the case of the CSS Gradient Button, different colors are beautifully arranged in the background. Also available in different color animations.

Gradient Button Animation CSS

Below I have given a demo that will help you to know how this Gradient Button Animation CSS works. Of course, you need to have a basic idea about HTML and CSS. 

In this article, you will find the required source code, step-by-step tutorials, and previews.

See the Pen Untitled by Ground Tutorial (@groundtutorial) on CodePen.


As you can see above, a button has been created on the web page. I used the button element of HTML to create this button. Then that button has been designed with the help of CSS. 

Many background colors have been added to that button. Background colors can be seen in the medium of animation. When you hover or click the mouse on this button, the background color can also be seen behind the button. 

How to create CSS gradient buttons

That means a colorful shadow can be seen behind the button. This is why this Gradient Button Animation has reached its maximum beauty. Here you can change the color to your liking.

Step 1: Basic structure of Gradient Button

The basic structure of this button has been created using the following HTML and CSS codes. First I created a button using HTML's button function. Here the background color of the web page is black.

<button class="btn btn-gradient">
   Hover Me
</button>


body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
background: #222;
}


Basic structure of Gradient Button

Step 2: Button's basic design

The basic design of the button has been done using the following CSS. The size of the button depends on the padding and I have used font-size: 1.5rem to increase the text size a bit. 

Background white color has been used. I later added different gradient colors. The animation is used here and the time is set at 8 seconds. I have explained at the end of this article why this animation has been used.

.btn {
position: relative;
padding: 1rem 3rem;
font-family: Lato, sans-serif;
font-size: 1.5rem;
line-height: 1.5;
color: black;
text-decoration: none;
background-color: white;
border: transparent;
outline: transparent;
cursor: pointer;
user-select: none;
white-space: nowrap;
animation: glow 8s linear infinite;
}

Button's basic design

I have added background color in the button using the following CSS. As you can see here using linear-gradient I have added many colors and each color can be seen at a 90-degree angle.

The size of the background has been increased to 300% to make the color of the button's background clear and beautiful. That is three times the normal size has been increased.


.btn-gradient {
color: white;
background: linear-gradient(90deg, #00dbde, #ddec16, #fc00ff, #00dbde,#2de7c9);
background-size: 300%;
border-radius: 2em;
}


added background color

Step 3: Add hover effect to the button

Now a color shadow has been arranged on the back of the button using CSS before. The color that can be seen in the background of the button can be seen behind the button. 

.btn-gradient::before {
position: absolute;
content: "";
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
z-index: -1;
background: inherit;
background-size: inherit;
border-radius: 4em;
opacity: 0;
transition: 0.5s;
}

Below I have arranged to show these colors using the hover effect. As you can see in the demo, when you click on the button, you can see the neon color of the button. 

I used filter: blur (20px) to make the background color a bit blurry. Here I have used 'opacity: 1' using hover. This means that when you click on this button or move the mouse, you will see this animation.

With that, I used an animation here and set its time to 8 seconds. I used this animation button in the background. I have added the same animation in both cases. The button has been activated using @keyframes.


.btn-gradient:hover::before {
opacity: 1;
filter: blur(20px);
animation: glow 8s linear infinite;
}

@keyframes glow {
to {
  background-position: 300%;
}
}


Add hover effect to the button

I hope you have learned how to create this Simple Gradient Button Animation from the tutorial below. Be sure to comment on how you like it. Use the button below to download the source code of this CSS Gradient Button Animation.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more