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

Order Button Animation

Multiple social media button

Neon Text Effect

HTML

CSS

JS

Recommended

Order Button Animation

Multiple social media button

Neon Text Effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS