Un código de Gregory

175 Skyrreum

Abrir en el editor Publica tu código

Recomendado

14 June 2024

Tarjeta animada de redes sociales.

28 March 2025

Conmutador de animación de sprites CSS

13 May 2025

paso de carros

HTML

CSS

body {
  margin: 0;
  height: 100vh;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe UI', sans-serif;
  overflow: hidden;
}

.container {
  perspective: 1000px;
}

.btn-wrapper {
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
}

.neon-btn {
  background: transparent;
  border: 2px solid red;
  color: red;
  padding: 20px 50px;
  font-size: 22px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  box-shadow:
    0 0 10px red,
    0 0 20px red,
    0 0 30px red,
    0 0 50px red,
    0 0 100px red;
  transition: all 0.2s ease;
}

.neon-btn:hover {
  box-shadow:
    0 0 15px red,
    0 0 30px red,
    0 0 60px red,
    0 0 100px red;
  transform: scale(1.05);
}

.neon-btn:active {
  transform: translateZ(-20px);
  box-shadow:
    0 0 8px red,
    0 0 16px red,
    0 0 24px red;
}

.neon-btn::after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 80px;
  background: radial-gradient(ellipse at center, rgba(255,0,0,0.3) 0%, rgba(0,0,0,0) 80%);
  z-index: -1;
  filter: blur(10px);
}

Recomendado

Tarjeta animada de redes sociales.

Conmutador de animación de sprites CSS

paso de carros

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS