CSS Magic Library - 100+ Premium Animation Effects

Button Animations

Pulse Button

CSS

.pulse-btn {
  animation: pulse 2s infinite;
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  border: none;
  padding: 15px 30px;
  border-radius: 30px;
  color: white;
  cursor: pointer;
  font-weight: 600;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

Bounce Button

CSS

.bounce-btn {
  animation: bounce 2s infinite;
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  border: none;
  padding: 15px 30px;
  border-radius: 30px;
  color: white;
  cursor: pointer;
  font-weight: 600;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  60% { transform: translateY(-10px); }
}

Shake Button

CSS

.shake-btn {
  animation: shake 0.5s infinite;
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  border: none;
  padding: 15px 30px;
  border-radius: 30px;
  color: white;
  cursor: pointer;
  font-weight: 600;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

Glow Button

CSS

.glow-btn {
  animation: glow 2s infinite alternate;
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  border: none;
  padding: 15px 30px;
  border-radius: 30px;
  color: white;
  cursor: pointer;
  font-weight: 600;
}

@keyframes glow {
  0% { box-shadow: 0 0 20px #6366f1; }
  100% { box-shadow: 0 0 40px #ec4899; }
}

Gradient Button

CSS

.gradient-btn {
  background: linear-gradient(45deg, #6366f1, #8b5cf6, #ec4899);
  background-size: 300% 300%;
  animation: gradient-animation 6s ease infinite;
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Card Animations

Flip Card

Flip Me!

CSS

.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

Shadow Card

Shadow Me!

CSS

.shadow-card {
  position: relative;
  overflow: hidden;
}

.shadow-card .demo-card {
  transition: transform 0.3s;
}

.shadow-card:hover .demo-card {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}