Boutons Neon

1,740 tousgreg

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 April 2026

Animation des CSS des boutons

11 July 2024

Effet lumineux néon

10 May 2025

Néon pulsé

HTML

CSS

body {
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.neon-button {
  font-family: 'Arial', sans-serif;
  font-size: 18px;
  color: #fff;
  background: none;
  border: 2px solid;
  padding: 12px 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

/* Boutons par couleur */
.cyan {
  border-color: #0ff;
  box-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
}
.cyan:hover {
  background-color: #0ff;
  color: #000;
  box-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
}

.magenta {
  border-color: #f0f;
  box-shadow: 0 0 10px #f0f, 0 0 20px #f0f;
}
.magenta:hover {
  background-color: #f0f;
  color: #000;
  box-shadow: 0 0 20px #f0f, 0 0 40px #f0f;
}

.yellow {
  border-color: #ff0;
  box-shadow: 0 0 10px #ff0, 0 0 20px #ff0;
}
.yellow:hover {
  background-color: #ff0;
  color: #000;
  box-shadow: 0 0 20px #ff0, 0 0 40px #ff0;
}

.green {
  border-color: #0f0;
  box-shadow: 0 0 10px #0f0, 0 0 20px #0f0;
}
.green:hover {
  background-color: #0f0;
  color: #000;
  box-shadow: 0 0 20px #0f0, 0 0 40px #0f0;
}

.red {
  border-color: #f00;
  box-shadow: 0 0 10px #f00, 0 0 20px #f00;
}
.red:hover {
  background-color: #f00;
  color: #000;
  box-shadow: 0 0 20px #f00, 0 0 40px #f00;
}

.blue {
  border-color: #00f;
  box-shadow: 0 0 10px #00f, 0 0 20px #00f;
}
.blue:hover {
  background-color: #00f;
  color: #fff;
  box-shadow: 0 0 20px #00f, 0 0 40px #00f;
}