Boutons Neon

1,817 tousgreg

Open In Editor Publish Your Code

Boutons Neon

Recommended

15 January 2026

Big NEON Tower vs Tiny Square Game HTML

30 August 2024

24 February 2025

Neon Login Form

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

JS