Create Neon Light Effect Buttons Using HTML/CSS

picture[1]-Create Neon Light Effect Buttons Using HTML/CSS - PANDA-PANDA

Implementing a neon light effect using HTML/CSS is relatively simple. It can be achieved by applying multiple shadows to the button. Adding three layers of shadows to the button, increasing the blur radius from the innermost to the outermost layer, creates a combined effect resembling neon lights.

HTML

  <a class="codepen-button"><span>Start Coding</span></a>

CSS

.codepen-button {
  display: block;
  cursor: pointer;
  color: white;
  margin: 0 auto;
  position: relative;
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
  overflow: hidden;
  padding: 3px;
  isolation: isolate;
}

.codepen-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
  background-size: 25% 100%;
  animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite;
  animation-play-state: paused;
  translate: -5% 0%;
  transition: translate 0.25s ease-out;
}

.codepen-button:hover::before {
  animation-play-state: running;
  transition-duration: 0.75s;
  translate: 0% 0%;
}

@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop {
  to {
    transform: translateX(-25%);
  }
}

.codepen-button span {
  position: relative;
  display: block;
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  background: #000;
  border-radius: 3px;
  height: 100%;
}

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>
    /* Yoinked from CodePen, but improved the animation
so that it is smooth among other more minor things */

    .codepen-button {
      display: block;
      cursor: pointer;
      color: white;
      margin: 0 auto;
      position: relative;
      text-decoration: none;
      font-weight: 600;
      border-radius: 6px;
      overflow: hidden;
      padding: 3px;
      isolation: isolate;
    }

    .codepen-button::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 400%;
      height: 100%;
      background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
      background-size: 25% 100%;
      animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite;
      animation-play-state: paused;
      translate: -5% 0%;
      transition: translate 0.25s ease-out;
    }

    .codepen-button:hover::before {
      animation-play-state: running;
      transition-duration: 0.75s;
      translate: 0% 0%;
    }

    @keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop {
      to {
        transform: translateX(-25%);
      }
    }

    .codepen-button span {
      position: relative;
      display: block;
      padding: 1rem 1.5rem;
      font-size: 1.1rem;
      background: #000;
      border-radius: 3px;
      height: 100%;
    }
  </style>
</head>

<body>
  <a class="codepen-button"><span>Start Coding</span></a>
</body>

</html>
THE END
Like 8 Share
comment
头像
Your valuable insights are welcome!
Submit
头像

Nickname

cancel
NicknameSmiliesCodeimage

    No comments yet