Animated Gradient Button on hover using HTML and CSS

Hello coders,

In this article, you will learn to create a gradient button using HTML CSS.

Follow these simple steps to make a beautiful gradient button:

1) Open any code editor like Visual Studio.
2) Create HTML, CSS files and put them in your project folder which you create.
3) Link the CSS File With HTML File.
4) Copy the HTML code, which I gave below, and paste it into the HTML which you create.

See also  Glassmorphism Style Card Hover Effect In CSS

HTML Code:

<!DOCTYPE html>
<html lang="en">
<!--www.codeithub.com-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <a href="#" class="rainbowbutton" alt="Button"></a>
</body>

</html>

CSS Code:

body {
    margin:0;
    background-color:black;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  a {
    text-decoration:none;
    color:#FFF;
  }
  .rainbowbutton {
    width:calc(20vw + 8px);
    height:calc(8vw + 8px);
    background-image: linear-gradient(90deg, #ff5e00 0%, #00ff22 49%, #4f94fc 80%, #ff006a 100%);
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2vw;
    font-weight:bold;
  }
  .rainbowbutton:after {
    content:attr(alt);
    width:20vw;
    height:8vw;
    background-color:black;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .rainbowbutton:hover {
    animation:slidebg 3s linear infinite;
  }
  @keyframes slidebg {
    to {
      background-position:25vw;
    }
  }

OUTPUT

See also  Page Accessibility Testing In Pure CSS - a11y-tests.css

More Examples:

Social Media Icons using HTML and CSS

Image 3D Sliders using HTML AND CSS

Responsive Price Table using HTML and CSS

Leave a Reply

Your email address will not be published. Required fields are marked *