Butoane css ~ Blogul lui Petre Vitan

Colecție 15 Butoane Premium cu Efecte Hover Realizat de petre-vitan

Previzualizare interactivă (Treceți cu mouse-ul peste butoane pentru a testa efectele):

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

Codul sursă de copiat:

<style>
/* ======================================================= */
/* COLECȚIE 15 BUTOANE PREMIUM CU EFECTE HOVER HOVER      */
/* REALIZAT DE PETRE-VITAN                                 */
/* ======================================================= */
@import url('https://googleapis.com');

.btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 30px;
  background-color: #111319;
}

.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);
  box-sizing: border-box;
}

/* 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;
  z-index: 1;
}
.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);
  z-index: -1;
}
.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;
  z-index: 1;
}
.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: #fff;
  border: 1px solid rgba(255,255,255,0.1);
}
.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%; border-color: #fff;
}

/* 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;
  z-index: 1;
}
.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;
  z-index: 1;
}
.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 ease;
}
.btn-blur:hover::after {
  opacity: 1;
  transform: scale(1.3);
  filter: blur(10px);
}
</style>

<div class="btn-container">
  <a class="btn-premium btn-liquid" href="#">Liquid Wave</a>
  <a class="btn-premium btn-neon-glow" href="#">Neon Aura</a>
  <a class="btn-premium btn-shiny" href="#">Glass Reflection</a>
  <a class="btn-premium btn-scanline" href="#">Laser Scan</a>
  <a class="btn-premium btn-double-slide" href="#">Gate Open</a>
  <a class="btn-premium btn-3d-retro" href="#">Retro 3D Push</a>
  <a class="btn-premium btn-ripple" href="#">Atomic Pulse</a>
  <a class="btn-premium btn-brackets" href="#">Auto Frame</a>
  <a class="btn-premium btn-grad-shift" href="#">Solar Flare</a>
  <a class="btn-premium btn-box-fill" href="#">Vertical Flood</a>
  <a class="btn-premium btn-bloom" href="#">Letter Stretch</a>
  <a class="btn-premium btn-float" href="#">Elevate</a>
  <a class="btn-premium btn-cyber-split" href="#">Cyber Slice</a>
  <a class="btn-premium btn-draw" href="#">Invert Collapse</a>
  <a class="btn-premium btn-blur" href="#">Ghost Cloud</a>
</div>

🛠️ Cum se instalează butoanele pe Blogspot:

Copiați întregul cod prin acționarea butonului de sus Copiază Codul.
Dacă vreți să le adăugați global pe tot blogul, deschideți un gadget de tip HTML/JavaScript din secțiunea Aspect (Layout) și lipiți codul acolo.
Dacă vreți să le folosiți doar într-un **articol sau pagină specifică**, deschideți editorul postării respective, comutați vizualizarea din colțul stâng pe modul Vizualizare HTML și lipiți codul direct în text.
Schimbați caracterul href="#" din codul butoanelor cu link-ul către paginile sau categoriile blogului dumneavoastră.

Butoane css

Niciun comentariu:

Trimiteți un comentariu

Formular de contact

Nu rata nicio noutate! Abonează-te și primești articolele pe mail:

Articole la întâmplare

Blogul lui Nurilusa

Ultimile comentarii

Bine de stiut