Neon button

Open In Editor Publish Your Code

.neon {
  margin-top: -150px;
  font-size: var(--font-size);
  display: inline-block;
  position: relative;
  cursor: pointer;
  border: var(--clr-neon) 0.125em solid;
  padding: 0.25em 1em;
  border-radius: 0.25em;
  text-shadow:
    0 0 .20em #FFF7,
    0 0 .30em var(--clr-neon);
  box-shadow:
    inset 0 0 .5em var(--clr-neon),
    0 0 .5em var(--clr-neon);
}

.neon::before {
  content: "";
  position: absolute;
  top: 140%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--clr-neon);
  transform:
    perspective(0.2em) rotateX(10deg) scale(1.3, 0.40);
  filter: blur(0.5em);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 100ms linear;
}

.neon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--clr-neon);
  box-shadow: 0 0 2em var(--clr-neon);
  z-index: -1;
  opacity: 0;
  transition: opacity 100ms linear;
}

.neon:hover::after {
  opacity: 1;
}

.neon:hover,
.neon:focus {
  color: white;
}

.neon:hover::before {
  opacity: 0.8;
}

Neon button

Recommended

CSS Button UI Sxrgxx Animation

button

Animated Download Button

HTML

CSS

JS

Recommended

CSS Button UI Sxrgxx Animation

button

Animated Download Button

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS