Ein Code von Gregory

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

13 June 2025

Ein Code von carab5256

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

Ein Code von Gregory

Empfohlen

Ein Code von Metehan

Ein Code von Codex

Ein Code von carab5256

HTML

CSS

JS

Empfohlen

Ein Code von Metehan

Ein Code von Codex

Ein Code von carab5256

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS