/* Base Button Styles */
.button {
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  overflow: hidden;
  position: relative;
  color: white;
  background-size: 200% 200%;
  background-position: 0 50%;
  transition: transform 0.3s ease, background-position 0.4s ease;
}

/* Metallic Animation */
.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-30deg);
  transition: 0.7s;
  opacity: 0.2;
}
.button:hover::before {
  left: 100%;
}

/* Zoom In Effect on Hover */
.button:hover {
  transform: scale(1.05);
  background-position: 100% 50%;
}
.button:active {
  transform: scale(0.98);
}

/* Button Variants */

/* 1. Primary */
.button-primary {
  background-image: linear-gradient(145deg, #007bff, #0056b3);
}
.button-primary:hover {
  background-image: linear-gradient(145deg, #0056b3, #003f7f);
}

/* 2. Secondary */
.button-secondary {
  background-image: linear-gradient(145deg, #6c757d, #5a6268);
}
.button-secondary:hover {
  background-image: linear-gradient(145deg, #5a6268, #4e555b);
}

/* 3. Success */
.button-success {
  background-image: linear-gradient(145deg, #28a745, #218838);
}
.button-success:hover {
  background-image: linear-gradient(145deg, #218838, #1e7e34);
}

/* 4. Danger */
.button-danger {
  background-image: linear-gradient(145deg, #dc3545, #c82333);
}
.button-danger:hover {
  background-image: linear-gradient(145deg, #c82333, #bd2130);
}

/* 5. Warning */
.button-warning {
  background-image: linear-gradient(145deg, #ffc107, #e0a800);
}
.button-warning:hover {
  background-image: linear-gradient(145deg, #e0a800, #d39e00);
}

/* 6. Info */
.button-info {
  background-image: linear-gradient(145deg, #17a2b8, #138496);
}
.button-info:hover {
  background-image: linear-gradient(145deg, #138496, #117a8b);
}

/* 7. Light */
.button-light {
  color: #333;
  background-image: linear-gradient(145deg, #f8f9fa, #e2e6ea);
}
.button-light:hover {
  background-image: linear-gradient(145deg, #e2e6ea, #d6d8db);
}

/* 8. Dark */
.button-dark {
  background-image: linear-gradient(145deg, #343a40, #23272b);
}
.button-dark:hover {
  background-image: linear-gradient(145deg, #23272b, #1d2124);
}

/* 9. Pink */
.button-pink {
  background-image: linear-gradient(145deg, #ff69b4, #e75480);
}
.button-pink:hover {
  background-image: linear-gradient(145deg, #e75480, #c71585);
}

/* 10. Teal */
.button-teal {
  background-image: linear-gradient(145deg, #20c997, #198754);
}
.button-teal:hover {
  background-image: linear-gradient(145deg, #198754, #146c43);
}