Bouton néon

5700 pan4o

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

30 August 2025

Bouton animé au survol

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');

:root {
  --clr-neon: #ff1414;
  --clr-bg: #000000;
  --font-size: 3rem;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--clr-bg);
  color: var(--clr-neon);
  font-family: "Balsamiq Sans";
  overflow: hidden;
}

.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;
}

Bouton néon

Recommandé

Bouton et calque animés CSS

Bouton Supprimer

Bouton animé au survol

HTML

CSS

JS

Recommandé

Bouton et calque animés CSS

Bouton Supprimer

Bouton animé au survol

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS