Creating Laser Animated Buttons Using HTML/CSS

picture[1]-Creating Laser Animated Buttons Using HTML/CSS - PANDA-PANDA

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
Like10 Share
comment
 avatar
Your valuable insights are welcome!
Submit
 avatar

Nickname

cancel
NicknameSmiliesCodeImage

    No comments