CSS Button Gradient Border Animation

CSS Button Gradient Border Animation (Free Code)

CSS Button Gradient Border Animation

In this tutorial, you will learn how to make CSS Button Gradient Border. Earlier I shared with you the tutorials of different types of gradient buttons. However, the background gradient color was not used here. Instead, the background is kept completely transparent and CSS Gradient Borders are used on the button borders.

Buttons we use in different places. If that button is attractive and animated it attracts more user attention. In that case, you can use such a simple CSS Button Gradient Border Button. This will definitely enhance the beauty and quality of your website.

CSS Button Gradient Border

Only if you have a basic idea about HTML and CSS can you build it. Below I have given a demo that will help you to get a live preview of this project. If you only want the source code, you can use the download button at the bottom of the article.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

I created a button on a web page as you can see above. A text has been used in the CSS Gradient button. I have kept the background of the button completely transparent. 

How to Create CSS Gradient Borders

However, I have used CSS Gradient Borders animation in button text and borders. Here you will have to animate different colors together. Here you can add colors of your choice.

Follow the steps below to create this CSS Button Gradient Border. I have given below all the code and step-by-step information.

1: Basic structure of Gradient Border

The basic structure of this button has been created using the following HTML and CSS codes. I used linear-gradient color in the background of the button. Here I have used 5 colors. 

You can add colors of your choice. Every color here can be seen at a 45-degree angle. Here I used the animation for four seconds. That means a color can be seen again after 4 seconds.

<div class=”container”>
    
<div>
* {
  box-sizing: border-box;
  margin: 0;
}
.container {
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  left: 50%;
  min-width: 300px;
  min-height: 100px;
  padding: 12px 15px;
  background-image: linear-gradient(-45deg, #3eff0d, #db12c8, #00ffee,#fffa00,#0099ff);
  border-radius: 1000px;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  -ms-border-radius: 1000px;
  background-size: 400% 400%;
  animation: mymove 4s linear infinite;
}
Basic structure of Gradient Border

2. Activate the background color animation (more…)

Continue ReadingCSS Button Gradient Border Animation (Free Code)
Simple Button Hover Effects using HTML & CSS

Simple Button Hover Effects using HTML & CSS (Free Code)

In this article, I have shown you how to create Simple Button Hover Effects using HTML and CSS. Buttons are used in different places on any website. In this tutorial, you will learn how to make simple button hover effects CSS.

Animated buttons are much more interesting than ordinary buttons. Added hover effect to this button. When the mouse is moved over the button, some changes will be made to the button. 

I have designed this button with the color of the Indian flag. In other words, the color of the Indian flag has been used in the background of the simple hover button CSS.

Simple Button Hover Effects CSS

When hovering over that button, the back of the button can be seen as the color shadow of the button. You can use this Simple Button Hover Effects in any of your buttons. Undoubtedly this CSS button hovers effect will make your button more beautiful.

Below is a demo or preview that will help you to know how this button hover works.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, there is a button that uses the color of the Indian flag in the background. That is, the first ocher, then white and then green has been used. I have used a text here.

I used a small amount of HTML and CSS to make it. If you only want the source code, you can use the download button at the bottom of the article. However, I request you to follow the tutorial below.

Step 1: Basic structure of button hover

Button’s basic information has been created using the following HTML and CSS codes. Here I have used a text that you can change the text to your liking. 

Background color black has been used here. When you use it in your project, you can change this color to your liking.

<div class=”ct-btn”>
   <div class=”gr-tri”>
       <span class=”gr-shadow3″></span>
       <button class=”gradient-neon”>My India</button>
   </div>
</div>
* {margin:0;padding: 0;}
body {
  background-color: #272727;
  margin: 200px auto;
}
.ct-btn {
  justify-content: center;
  display: -webkit-box;
  display: flex;
  cursor: pointer;
  margin:20px;
}
Basic structure of button hover

Step 2: Design the button with CSS (more…)

Continue ReadingSimple Button Hover Effects using HTML & CSS (Free Code)