DEV Community

Thecodepedia
Thecodepedia

Posted on • Originally published at thecodepedia.com on

How to Create a Stunning Animated Button in HTML

Hello folks, today in this blog you will learn how to create a cool animated button in HTML using CSS. This button is amazing for your project. You can use this button on your website. You can make this button in HTML in less than 5 minutes. Previously I have shared How To Quickly Launch Amazing New Website Using Tailwind CSS <10 Minutes

Preview of the button using html and css

How to Create a Stunning Animated Button in HTML

How to Create a Stunning Animated Button in HTML
How to Create a Stunning Animated Button in HTML

Source code of the button in html

<!DOCTYPE html>
<html lang="en">
  <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>Making a button using html and css</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <button>
      <span></span>
      <span></span>
      <span></span>
      <span></span> Hover me
    </button>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Source code of the button in css

Related: How to Become a Successful Freelancer: 5 Tips for the Novice

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
  }

  button {
    position: relative;
    padding: 1em 2em;
    outline: none;
    border: 1px solid #303030;
    background: #212121;
    color: #ae00ff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 17px;
    overflow: hidden;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
  }

  button:hover {
    -webkit-box-shadow: 0 0 10px #ae00ff, 0 0 25px #001eff, 0 0 50px #ae00ff;
    box-shadow: 0 0 10px #ae00ff, 0 0 25px #001eff, 0 0 50px #ae00ff;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }

  button span {
    position: absolute;
  }

  button span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(transparent),
      to(#ae00ff)
    );
    background: linear-gradient(90deg, transparent, #ae00ff);
  }

  button:hover span:nth-child(1) {
    left: 100%;
    -webkit-transition: 0.7s;
    transition: 0.7s;
  }

  button span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(transparent),
      to(#001eff)
    );
    background: linear-gradient(90deg, transparent, #001eff);
  }

  button:hover span:nth-child(3) {
    right: 100%;
    -webkit-transition: 0.7s;
    transition: 0.7s;
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
  }

  button span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(transparent),
      to(#ae00ff)
    );
    background: linear-gradient(180deg, transparent, #ae00ff);
  }

  button:hover span:nth-child(2) {
    top: 100%;
    -webkit-transition: 0.7s;
    transition: 0.7s;
    -webkit-transition-delay: 0.17s;
    transition-delay: 0.17s;
  }

  button span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(transparent),
      to(#001eff)
    );
    background: linear-gradient(360deg, transparent, #001eff);
  }

  button:hover span:nth-child(4) {
    bottom: 100%;
    -webkit-transition: 0.7s;
    transition: 0.7s;
    -webkit-transition-delay: 0.52s;
    transition-delay: 0.52s;
  }

  button:active {
    background: #ae00af;
    background: -webkit-gradient(
      linear,
      left bottom,
      right top,
      from(#ae00af),
      to(#001eff)
    );
    background: linear-gradient(to top right, #ae00af, #001eff);
    color: #bfbfbf;
    -webkit-box-shadow: 0 0 8px #ae00ff, 0 0 8px #001eff, 0 0 8px #ae00ff;
    box-shadow: 0 0 8px #ae00ff, 0 0 8px #001eff, 0 0 8px #ae00ff;
    -webkit-transition: 0.1s;
    transition: 0.1s;
  }

  button:active
    span:nth-child(1)
    span:nth-child(2)
    span:nth-child(2)
    span:nth-child(2) {
    -webkit-transition: none;
    transition: none;
    -webkit-transition-delay: none;
    transition-delay: none;
  }
Enter fullscreen mode Exit fullscreen mode

Check this post: Make an amazing calculator using Html, Css& Javascript

Copy this source code and paste it intoindex.html and style.css file and open it through live server.

Conclusion

This tutorial is a great way to create beautiful buttons that can be placed on any page of your website. The source code provided at the bottom of the article shows how you can easily change the color and size of the button. If you enjoyed this tutorial, please share it with your friends!

Discussion (0)