Creating Laser Animated Buttons Using HTML/CSS

As a unique and creative design element, laser animated buttons can capture users’ attention and enhance interaction experience. By employing HTML and CSS, we can effortlessly create these cool laser animated buttons.

Here is the specific code:

HTML

<a href="#" class="button">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Button
</a>

CSS

.button {
  position: relative;
  padding: 12px 25px;
  font-size: 1.5rem;
  color: #1e9bff;
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  text-shadow: 0 0 15px #1e9bff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  transition: 0.5s;
  z-index: 1;
}

.button:hover {
  color: #fff;
  border: 2px solid rgba(0, 0, 0, 0);
  box-shadow: 0 0 0px #1e9bff;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1e9bff;
  z-index: -1;
  transform: scale(0);
  transition: 0.5s;
}

.button:hover::before {
  transform: scale(1);
  transition-delay: 0.5s;
  box-shadow: 0 0 10px #1e9bff,
    0 0 30px #1e9bff,
    0 0 60px #1e9bff;
}

.button span {
  position: absolute;
  background: #1e9bff;
  pointer-events: none;
  border-radius: 2px;
  box-shadow: 0 0 10px #1e9bff,
    0 0 20px #1e9bff,
    0 0 30px #1e9bff,
    0 0 50px #1e9bff,
    0 0 100px #1e9bff;
  transition: 0.5s ease-in-out;
  transition-delay: 0.25s;
}

.button:hover span {
  opacity: 0;
  transition-delay: 0s;
}

.button span:nth-child(1),
.button span:nth-child(3) {
  width: 40px;
  height: 4px;
}

.button:hover span:nth-child(1),
.button:hover span:nth-child(3) {
  transform: translateX(0);
}

.button span:nth-child(2),
.button span:nth-child(4) {
  width: 4px;
  height: 40px;
}

.button:hover span:nth-child(1),
.button:hover span:nth-child(3) {
  transform: translateY(0);
}

.button span:nth-child(1) {
  top: calc(50% - 2px);
  left: -50px;
  transform-origin: left;
}

.button:hover span:nth-child(1) {
  left: 50%;
}

.button span:nth-child(3) {
  top: calc(50% - 2px);
  right: -50px;
  transform-origin: right;
}

.button:hover span:nth-child(3) {
  right: 50%;
}

.button span:nth-child(2) {
  left: calc(50% - 2px);
  top: -50px;
  transform-origin: top;
}

.button:hover span:nth-child(2) {
  top: 50%;
}

.button span:nth-child(4) {
  left: calc(50% - 2px);
  bottom: -50px;
  transform-origin: bottom;
}

.button:hover span:nth-child(4 ) {
  bottom: 50%;
}

HTML & CSS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .button {
      position: relative;
      padding: 12px 25px;
      font-size: 1.5rem;
      color: #1e9bff;
      border: 2px solid rgba(0, 0, 0, 0.5);
      border-radius: 4px;
      text-shadow: 0 0 15px #1e9bff;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.1rem;
      transition: 0.5s;
      z-index: 1;
    }

    .button:hover {
      color: #fff;
      border: 2px solid rgba(0, 0, 0, 0);
      box-shadow: 0 0 0px #1e9bff;
    }

    .button::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #1e9bff;
      z-index: -1;
      transform: scale(0);
      transition: 0.5s;
    }

    .button:hover::before {
      transform: scale(1);
      transition-delay: 0.5s;
      box-shadow: 0 0 10px #1e9bff,
        0 0 30px #1e9bff,
        0 0 60px #1e9bff;
    }

    .button span {
      position: absolute;
      background: #1e9bff;
      pointer-events: none;
      border-radius: 2px;
      box-shadow: 0 0 10px #1e9bff,
        0 0 20px #1e9bff,
        0 0 30px #1e9bff,
        0 0 50px #1e9bff,
        0 0 100px #1e9bff;
      transition: 0.5s ease-in-out;
      transition-delay: 0.25s;
    }

    .button:hover span {
      opacity: 0;
      transition-delay: 0s;
    }

    .button span:nth-child(1),
    .button span:nth-child(3) {
      width: 40px;
      height: 4px;
    }

    .button:hover span:nth-child(1),
    .button:hover span:nth-child(3) {
      transform: translateX(0);
    }

    .button span:nth-child(2),
    .button span:nth-child(4) {
      width: 4px;
      height: 40px;
    }

    .button:hover span:nth-child(1),
    .button:hover span:nth-child(3) {
      transform: translateY(0);
    }

    .button span:nth-child(1) {
      top: calc(50% - 2px);
      left: -50px;
      transform-origin: left;
    }

    .button:hover span:nth-child(1) {
      left: 50%;
    }

    .button span:nth-child(3) {
      top: calc(50% - 2px);
      right: -50px;
      transform-origin: right;
    }

    .button:hover span:nth-child(3) {
      right: 50%;
    }

    .button span:nth-child(2) {
      left: calc(50% - 2px);
      top: -50px;
      transform-origin: top;
    }

    .button:hover span:nth-child(2) {
      top: 50%;
    }

    .button span:nth-child(4) {
      left: calc(50% - 2px);
      bottom: -50px;
      transform-origin: bottom;
    }

    .button:hover span:nth-child(4) {
      bottom: 50%;
    }
  </style>
</head>

<body>


  <a href="#" class="button">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Button
  </a>

</body>

</html>

THE END