Botones de neón

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

6 March 2025

Un código de Redllowge

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

Botones de neón

Recomendado

Un código de omer

Un código de facontheo1

Un código de Redllowge

HTML

CSS

JS

Recomendado

Un código de omer

Un código de facontheo1

Un código de Redllowge

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS