Butoane css

Liquid Wave Neon Aura Glass Reflection Laser Scan Gate Open Retro 3D Push Atomic Pulse Auto Frame Solar Flare Vertical Flood Letter Stretch Elevate Cyber Slice Invert Collapse Ghost Cloud

<style>

  /* CONTAINER ȘI STILURI REUTILIZABILE */

.btn-container {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  justify-content: center;

  padding: 30px;

  background-color: #111319; /* Fundal închis pentru a evidenția efectele luminoase */

}

.btn-premium {

  position: relative;

  display: inline-block;

  padding: 14px 28px;

  font-family: 'Poppins', 'Segoe UI', sans-serif;

  font-size: 15px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  text-decoration: none;

  border: none;

  cursor: pointer;

  overflow: hidden;

  border-radius: 6px;

  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

}

/* 1. LIQUID FILL EFFECT */

.btn-liquid {

  background: #0072ff;

  color: #fff;

  z-index: 1;

}

.btn-liquid::before {

  content: '';

  position: absolute;

  top: 100%;

  left: 50%;

  width: 150%;

  height: 300%;

  background: #00c6ff;

  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);

  border-radius: 40%;

  transform: translateX(-50%);

  z-index: -1;

}

.btn-liquid:hover::before {

  top: -50%;

  transform: translateX(-50%) rotate(360deg);

}

/* 2. GLOWING NEON BORDER */

.btn-neon-glow {

  background: transparent;

  color: #00ffcc;

  border: 2px solid #00ffcc;

  box-shadow: inset 0 0 0 0 rgba(0,255,204,0.5);

}

.btn-neon-glow:hover {

  box-shadow: inset 0 0 20px 0 rgba(0,255,204,0.6), 0 0 20px 5px rgba(0,255,204,0.4);

  text-shadow: 0 0 5px #fff;

}

/* 3. SHINY GLASS SLIDE */

.btn-shiny {

  background: #e74c3c;

  color: #fff;

}

.btn-shiny::before {

  content: '';

  position: absolute;

  top: 0; left: -100%;

  width: 50%; height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);

  transform: skewX(-25deg);

}

.btn-shiny:hover::before {

  left: 150%;

  transition: all 0.6s ease;

}

/* 4. FUTURISTIC SCANLINE */

.btn-scanline {

  background: #111;

  color: #ff0055;

  border: 1px solid #ff0055;

}

.btn-scanline::before {

  content: '';

  position: absolute;

  top: 0; left: 0; width: 100%; height: 2px;

  background: #ff0055;

  opacity: 0;

}

.btn-scanline:hover::before {

  opacity: 1;

  animation: scan 1s linear infinite;

}

@keyframes scan {

  0% { top: 0; }

  100% { top: 100%; }

}

/* 5. OVERLAY DOUBLE SLIDE */

.btn-double-slide {

  background: transparent;

  color: #fff;

  border: 2px solid #fff;

}

.btn-double-slide::before, .btn-double-slide::after {

  content: '';

  position: absolute; top: 0; width: 50%; height: 100%;

  background: #fff; z-index: -1;

  transition: all 0.3s ease-out;

}

.btn-double-slide::before { left: -50%; }

.btn-double-slide::after { right: -50%; }

.btn-double-slide:hover { color: #000; }

.btn-double-slide:hover::before { left: 0; }

.btn-double-slide:hover::after { right: 0; }

/* 6. BOUNCING 3D BLOCKS */

.btn-3d-retro {

  background: #f1c40f;

  color: #000;

  box-shadow: -6px 6px 0 #d35400;

}

.btn-3d-retro:hover {

  transform: translate(3px, -3px);

  box-shadow: -9px 9px 0 #d35400;

}

.btn-3d-retro:active {

  transform: translate(-3px, 3px);

  box-shadow: -3px 3px 0 #d35400;

}

/* 7. RADIAL RIPPLE PULSE */

.btn-ripple {

  background: #9b59b6;

  color: #fff;

}

.btn-ripple:hover {

  animation: ripple-effect 0.8s ease-out;

}

@keyframes ripple-effect {

  0% { box-shadow: 0 0 0 0 rgba(155, 89, 182, 0.7); }

  100% { box-shadow: 0 0 0 20px rgba(155, 89, 182, 0); }

}

/* 8. CORNER BRACKETS EXPANSION */

.btn-brackets {

  background: transparent;

  color: #34495e;

}

.btn-brackets::before, .btn-brackets::after {

  content: ''; position: absolute; width: 12px; height: 12px;

  border: 2px solid #34495e; transition: all 0.3s ease;

}

.btn-brackets::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }

.btn-brackets::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.btn-brackets:hover::before, .btn-brackets:hover::after {

  width: 100%; height: 100%;

}

/* 9. GRADIENT ROTATION SHIFT */

.btn-grad-shift {

  background: linear-gradient(270deg, #ff416c, #ff4b2b);

  background-size: 400% 400%;

  color: #fff;

}

.btn-grad-shift:hover {

  background-position: 100% 50%;

}

/* 10. BLOX FILL (SQUARE FILL) */

.btn-box-fill {

  background: transparent;

  color: #2ecc71;

  border: 2px solid #2ecc71;

}

.btn-box-fill::before {

  content: ''; position: absolute; top: 0; left: 0;

  width: 100%; height: 0; background: #2ecc71;

  z-index: -1; transition: all 0.4s ease;

}

.btn-box-fill:hover { color: #fff; }

.btn-box-fill:hover::before { height: 100%; }

/* 11. TEXT SPACING BLOOM */

.btn-bloom {

  background: #34495e;

  color: #fff;

}

.btn-bloom:hover {

  letter-spacing: 4px;

  background: #2c3e50;

}

/* 12. FLOATING SHADOW LAYER */

.btn-float {

  background: #fff;

  color: #333;

  box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

.btn-float:hover {

  transform: translateY(-6px);

  box-shadow: 0 15px 20px rgba(0,0,0,0.3);

}

/* 13. CYBERBLADE SPLIT */

.btn-cyber-split {

  background: #000;

  color: #fff;

  border: 1px solid #ffff00;

  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);

}

.btn-cyber-split:hover {

  background: #ffff00;

  color: #000;

  font-weight: 900;

}

/* 14. INVERSE GHOST DRAW */

.btn-draw {

  background: transparent;

  color: #1abc9c;

  box-shadow: inset 0 0 0 2px #1abc9c;

}

.btn-draw:hover {

  box-shadow: inset 0 0 0 0 #1abc9c;

  background: #1abc9c;

  color: #fff;

}

/* 15. BLUR PARTICLES EFFECT */

.btn-blur {

  background: #ff6b6b;

  color: #fff;

}

.btn-blur::after {

  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;

  background: inherit; z-index: -1; opacity: 0; transition: all 0.5s default;

}

.btn-blur:hover::after {

  opacity: 1;

  transform: scale(1.3);

  filter: blur(10px);

}

</style>

<!-- Containerul are fundal închis implicit pentru contrast maxim -->

<div class="btn-container">

  

  <a href="#" class="btn-premium btn-liquid">Liquid Wave</a>

  

  <a href="#" class="btn-premium btn-neon-glow">Neon Aura</a>

  

  <a href="#" class="btn-premium btn-shiny">Glass Reflection</a>

  

  <a href="#" class="btn-premium btn-scanline">Laser Scan</a>

  

  <a href="#" class="btn-premium btn-double-slide">Gate Open</a>

  

  <a href="#" class="btn-premium btn-3d-retro">Retro 3D Push</a>

  

  <a href="#" class="btn-premium btn-ripple">Atomic Pulse</a>

  

  <a href="#" class="btn-premium btn-brackets">Auto Frame</a>

  

  <a href="#" class="btn-premium btn-grad-shift">Solar Flare</a>

  

  <a href="#" class="btn-premium btn-box-fill">Vertical Flood</a>

  

  <a href="#" class="btn-premium btn-bloom">Letter Stretch</a>

  

  <a href="#" class="btn-premium btn-float">Elevate</a>

  

  <a href="#" class="btn-premium btn-cyber-split">Cyber Slice</a>

  

  <a href="#" class="btn-premium btn-draw">Invert Collapse</a>

  

  <a href="#" class="btn-premium btn-blur">Ghost Cloud</a>

</div>