Boutons Neon

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

10 February 2025

Formulaire de connexion HTML avec style CSS néon

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

Boutons Neon

Recommandé

Boutons radio

Effet de texte néon

Formulaire de connexion HTML avec style CSS néon

HTML

CSS

JS

Recommandé

Boutons radio

Effet de texte néon

Formulaire de connexion HTML avec style CSS néon

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS