Bouton néon

5493 pan4o

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

18 October 2025

Modèle HTML de base avec bouton (espagnol)

19 May 2025

Bouton d'animation magique

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é

Modèle HTML de base avec bouton (espagnol)

bouton dom

Bouton d'animation magique

HTML

CSS

JS

Recommandé

Modèle HTML de base avec bouton (espagnol)

bouton dom

Bouton d'animation magique

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS