MRRPortfolioBeranda

CSS STUDIOv2.4/

Components›Button Lab

LIVE PREVIEW • 100%

OPEN-SOURCE COMPONENT LAB

Eksplorasi gaya tombol web modern open-source: Cyber Glow, Glassmorphic, Gradient Shimmer, Chamfered Cyber, 3D Push, dan Minimal Pill. Atur warna, ukuran, dan shadow langsung dan salin kode CSS/React siap pakai.

Button Configuration

Label Tombol (Button Text)

Variasi Gaya (Component Style)

Warna Utama (Primary Accent)

Warna Utama (Primary Accent)#22d3ee

Warna Teks (Text Color)

Warna Teks (Text Color)#020617

Horizontal Padding (px)

Vertical Padding (px)

Ukuran Font (Font Size)

Lengkungan (Border Radius)

Intensitas Glow / Shadow

Sertakan Ikon Panah (Arrow Icon)

Efek Animasi Hover (Micro-Scale)

STAGE • BUTTON STUDIO

.btn-cyber-glow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: monospace;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #020617;
  background-color: #22d3ee;
  border: 1px solid #22d3ee;
  border-radius: 12px;
  box-shadow: 0 0 16px #22d3ee80;
  transition: all 0.3s ease;
}
.btn-cyber-glow:hover {
  transform: scale(1.05);
  box-shadow: 0 0 28.8px #22d3ee;
}