Hover & Click Effects

Ripple Click

.effect-1 {
  position: relative;
  overflow: hidden;
}
.effect-1::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}
.effect-1:active::after {
  width: 200%;
  height: 200%;
}

Hover Lift

.effect-2 {
  transition: transform 0.3s;
}
.effect-2:hover {
  transform: translateY(-5px);
}

Shimmer Swipe

.effect-3 {
  position: relative;
  overflow: hidden;
}
.effect-3::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transition: left 0.4s;
}
.effect-3:hover::after {
  left: 100%;
}

Morphing Hover

.effect-4 {
  transition: border-radius 0.3s;
}
.effect-4:hover {
  border-radius: 20px;
}

Parallax Hover

.effect-5 {
  transition: transform 0.3s;
}
.effect-5:hover {
  transform: perspective(1000px) translateZ(20px);
}

Bounce Hover

.effect-6 {
  transition: transform 0.3s;
}
.effect-6:hover {
  transform: scale(1.1);
}

Clip-Path Hover

.effect-7 {
  transition: clip-path 0.3s;
}
.effect-7:hover {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

Direction-Aware Hover

.effect-8 {
  position: relative;
}
.effect-8::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  transform: translateX(-100%);
}
.effect-8:hover::before {
  transform: translateX(0);
}

Elastic Hover

.effect-9 {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.effect-9:hover {
  transform: scale(1.2);
}

Glow Hover

.effect-10 {
  transition: box-shadow 0.3s;
}
.effect-10:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

Magnetic Hover

.effect-11 {
  transition: transform 0.3s;
}
.effect-11:hover {
  transform: translate(5px, -5px);
}

Neon Flicker Hover

.effect-12 {
  transition: box-shadow 0.3s;
}
.effect-12:hover {
  box-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88;
  animation: flicker 1.5s infinite alternate;
}
@keyframes flicker {
  0% { box-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88; }
  100% { box-shadow: 0 0 5px #00ff88, 0 0 10px #00ff88; }
}

Particle Burst Hover

.effect-13 {
  position: relative;
  overflow: hidden;
}
.effect-13::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}
.effect-13:hover::after {
  width: 300%;
  height: 300%;
}

Quick Fade Hover

.effect-14 {
  transition: opacity 0.2s;
}
.effect-14:hover {
  opacity: 0.7;
}

Rotate Hover

.effect-15 {
  transition: transform 0.3s;
}
.effect-15:hover {
  transform: rotate(10deg);
}

Scale Hover

.effect-16 {
  transition: transform 0.3s;
}
.effect-16:hover {
  transform: scale(1.15);
}

Shadow Gcolumb Hover

.effect-17 {
  transition: box-shadow 0.3s;
}
.effect-17:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

Swipe Underline Hover

.effect-18 {
  position: relative;
}
.effect-18::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #00ff88;
  transition: width 0.3s;
}
.effect-18:hover::after {
  width: 100%;
}

Tilt Hover

.effect-19 {
  transition: transform 0.3s;
}
.effect-19:hover {
  transform: perspective(1000px) rotateY(10deg);
}

Underline Reveal Hover

.effect-20 {
  position: relative;
}
.effect-20::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
  transform: scaleX(0);
  transition: transform 0.3s;
}
.effect-20:hover::after {
  transform: scaleX(1);
}

Vibration Hover

.effect-21 {
  animation: vibrate 0.1s infinite;
}
.effect-21:hover {
  animation: none;
}
@keyframes vibrate {
  0% { transform: translateX(0); }
  50% { transform: translateX(2px); }
  100% { transform: translateX(-2px); }
}

Wave Distortion Hover

.effect-22 {
  transition: filter 0.3s;
}
.effect-22:hover {
  filter: brightness(1.2) contrast(1.2);
}

X-Ray Hover

.effect-23 {
  transition: filter 0.3s;
}
.effect-23:hover {
  filter: opacity(0.8) grayscale(0.5);
}

Y-Axis Flip Hover

.effect-24 {
  transition: transform 0.5s;
}
.effect-24:hover {
  transform: rotateY(180deg);
}

'); transition: transform 0.3s; }\n.effect-25:hover::after { transform: scaleY(1.5); }">Zigzag Hover

.effect-25 {
  position: relative;
}
.effect-25::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: url('data:image/svg+xml;utf8,');
  transition: transform 0.3s;
}
.effect-25:hover::after {
  transform: scaleY(1.5);
}

Alpha Fade Hover

.effect-26 {
  transition: opacity 0.3s;
}
.effect-26:hover {
  opacity: 0.5;
}

Bevel Hover

.effect-27 {
  transition: box-shadow 0.3s;
}
.effect-27:hover {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

Color Swipe Hover

.effect-28 {
  transition: background 0.3s;
}
.effect-28:hover {
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
}

Drip Hover

.effect-29 {
  position: relative;
  overflow: hidden;
}
.effect-29::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: height 0.3s;
}
.effect-29:hover26 {
  height: 100%;
}

Echo Hover

.effect-30 {
  position: relative;
}
.effect-30::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s;
  opacity: 0;
}
.effect-30:hover::after {
  opacity: 1;
}

Flip Hover

.effect-31 {
  transition: transform 0.5s;
}
.effect-31:hover {
  transform: rotateX(180deg);
}

Grayscale Hover

.effect-32 {
  transition: filter 0.3s;
}
.effect-32:hover {
  filter: grayscale(100%);
}

Highlight Pulse Hover

.effect-33 {
  transition: box-shadow 0.3s;
}
.effect-33:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); }
  50% { box-shadow: 0 0 20px rgba(255, 255, 255, 1); }
}

Ink Spread Hover

.effect-34 {
  position: relative;
  overflow: hidden;
}
.effect-34::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
  transform: scale(0);
}
.effect-34:hover::after {
  transform: scale(1);
}

Jelly Hover

.effect-35 {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.effect-35:hover {
  transform: scale(1.2, 0.8);
}

Kinetic Dots Hover

.effect-36 {
  position: relative;
}
.effect-36::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: dots 1s infinite;
}
@keyframes dots {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(2); }
}

Light Trail Hover

.effect-37 {
  position: relative;
}
.effect-37::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
  transition: left 0.5s;
}
.effect-37:hover::after {
  left: 100%;
}

Melt Hover

.effect-38 {
  transition: filter 0.3s;
}
.effect-38:hover {
  filter: blur(2px);
}

Noise Glitch Hover

.effect-39 {
  transition: filter 0.3s;
}
.effect-39:hover {
  filter: contrast(1.5) brightness(1.2);
}

Opacity Hover

.effect-40 {
  transition: opacity 0.3s;
}
.effect-40:hover {
  opacity: 0.8;
}

Pulse Ring Hover

.effect-41 {
  position: relative;
}
.effect-41::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border: 2px solid #00ff88;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}
.effect-41:hover::after {
  width: 100%;
  height: 100%;
}

Quantum Hover

.effect-42 {
  transition: transform 0.3s;
}
.effect-42:hover {
  transform: scale(1.1) rotate(5deg);
}

Ribbon Hover

.effect-43 {
  position: relative;
}
.effect-43::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff6b6b, transparent);
  transition: opacity 0.3s;
  opacity: 0;
}
.effect-43:hover::after {
  opacity: 1;
}

Spiral Hover

.effect-44 {
  transition: transform 0.5s;
}
.effect-44:hover {
  transform: rotate(360deg);
}

Thermal Hover

.effect-45 {
  transition: filter 0.3s;
}
.effect-45:hover {
  filter: hue-rotate(90deg);
}

Underline Draw Hover

.effect-46 {
  position: relative;
}
.effect-46::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #000;
  transition: width 0.3s;
}
.effect-46:hover::after {
  width: 100%;
}

Video Mask Hover

.effect-47 {
  position: relative;
}
.effect-47:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

Warp Hover

.effect-48 {
  transition: filter 0.3s;
}
.effect-48:hover {
  filter: contrast(1.5);
}

Xylophone Hover

.effect-49 {
  position: relative;
}
.effect-49::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  transition: opacity 0.3s;
  opacity: 0;
}
.effect-49:hover::after {
  opacity: 0.3;
}

Zoom Hover

.effect-50 {
  transition: transform 0.3s;
}
.effect-50:hover {
  transform: scale(1.2);
}