mycsslab/src/components/buttons.css

MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects

/**
 * FluxCSS Button Components
 * Comprehensive button system with variants, sizes, states, and animations
 */

/* Base Button */
.my-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  background-image: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.my-btn:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.my-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button Variants */
.my-btn-primary {
  background-color: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
}

.my-btn-primary:hover:not(:disabled) {
  background-color: #2563eb;
  border-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.my-btn-primary:active:not(:disabled) {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.my-btn-secondary {
  background-color: #f3f4f6;
  color: #374151;
  border-color: #d1d5db;
}

.my-btn-secondary:hover:not(:disabled) {
  background-color: #e5e7eb;
  border-color: #9ca3af;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.my-btn-secondary:active:not(:disabled) {
  background-color: #d1d5db;
  border-color: #6b7280;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.my-btn-outline {
  background-color: transparent;
  color: #3b82f6;
  border-color: #3b82f6;
}

.my-btn-outline:hover:not(:disabled) {
  background-color: #3b82f6;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.my-btn-outline:active:not(:disabled) {
  background-color: #2563eb;
  border-color: #2563eb;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.my-btn-ghost {
  background-color: transparent;
  color: #6b7280;
  border-color: transparent;
}

.my-btn-ghost:hover:not(:disabled) {
  background-color: #f3f4f6;
  color: #374151;
  transform: translateY(-1px);
}

.my-btn-ghost:active:not(:disabled) {
  background-color: #e5e7eb;
  color: #1f2937;
  transform: translateY(0);
}

.my-btn-success {
  background-color: #22c55e;
  color: #ffffff;
  border-color: #22c55e;
}

.my-btn-success:hover:not(:disabled) {
  background-color: #16a34a;
  border-color: #16a34a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.my-btn-success:active:not(:disabled) {
  background-color: #15803d;
  border-color: #15803d;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);
}

.my-btn-warning {
  background-color: #f59e0b;
  color: #ffffff;
  border-color: #f59e0b;
}

.my-btn-warning:hover:not(:disabled) {
  background-color: #d97706;
  border-color: #d97706;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.my-btn-warning:active:not(:disabled) {
  background-color: #b45309;
  border-color: #b45309;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.my-btn-error {
  background-color: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

.my-btn-error:hover:not(:disabled) {
  background-color: #dc2626;
  border-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.my-btn-error:active:not(:disabled) {
  background-color: #b91c1c;
  border-color: #b91c1c;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

/* Additional Button Variants */
.my-btn-info {
  background-color: #06b6d4;
  color: #ffffff;
  border-color: #06b6d4;
}

.my-btn-info:hover:not(:disabled) {
  background-color: #0891b2;
  border-color: #0891b2;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.my-btn-info:active:not(:disabled) {
  background-color: #0e7490;
  border-color: #0e7490;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(6, 182, 212, 0.2);
}

.my-btn-purple {
  background-color: #8b5cf6;
  color: #ffffff;
  border-color: #8b5cf6;
}

.my-btn-purple:hover:not(:disabled) {
  background-color: #7c3aed;
  border-color: #7c3aed;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.my-btn-purple:active:not(:disabled) {
  background-color: #6d28d9;
  border-color: #6d28d9;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
}

.my-btn-pink {
  background-color: #ec4899;
  color: #ffffff;
  border-color: #ec4899;
}

.my-btn-pink:hover:not(:disabled) {
  background-color: #db2777;
  border-color: #db2777;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.my-btn-pink:active:not(:disabled) {
  background-color: #be185d;
  border-color: #be185d;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(236, 72, 153, 0.2);
}

.my-btn-indigo {
  background-color: #6366f1;
  color: #ffffff;
  border-color: #6366f1;
}

.my-btn-indigo:hover:not(:disabled) {
  background-color: #4f46e5;
  border-color: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.my-btn-indigo:active:not(:disabled) {
  background-color: #4338ca;
  border-color: #4338ca;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

.my-btn-teal {
  background-color: #14b8a6;
  color: #ffffff;
  border-color: #14b8a6;
}

.my-btn-teal:hover:not(:disabled) {
  background-color: #0d9488;
  border-color: #0d9488;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.my-btn-teal:active:not(:disabled) {
  background-color: #0f766e;
  border-color: #0f766e;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(20, 184, 166, 0.2);
}

.my-btn-orange {
  background-color: #f97316;
  color: #ffffff;
  border-color: #f97316;
}

.my-btn-orange:hover:not(:disabled) {
  background-color: #ea580c;
  border-color: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.my-btn-orange:active:not(:disabled) {
  background-color: #c2410c;
  border-color: #c2410c;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(249, 115, 22, 0.2);
}

.my-btn-rose {
  background-color: #f43f5e;
  color: #ffffff;
  border-color: #f43f5e;
}

.my-btn-rose:hover:not(:disabled) {
  background-color: #e11d48;
  border-color: #e11d48;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}

.my-btn-rose:active:not(:disabled) {
  background-color: #be123c;
  border-color: #be123c;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(244, 63, 94, 0.2);
}

.my-btn-slate {
  background-color: #64748b;
  color: #ffffff;
  border-color: #64748b;
}

.my-btn-slate:hover:not(:disabled) {
  background-color: #475569;
  border-color: #475569;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}

.my-btn-slate:active:not(:disabled) {
  background-color: #334155;
  border-color: #334155;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(100, 116, 139, 0.2);
}

.my-btn-zinc {
  background-color: #71717a;
  color: #ffffff;
  border-color: #71717a;
}

.my-btn-zinc:hover:not(:disabled) {
  background-color: #52525b;
  border-color: #52525b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(113, 113, 122, 0.3);
}

.my-btn-zinc:active:not(:disabled) {
  background-color: #3f3f46;
  border-color: #3f3f46;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(113, 113, 122, 0.2);
}

.my-btn-stone {
  background-color: #78716c;
  color: #ffffff;
  border-color: #78716c;
}

.my-btn-stone:hover:not(:disabled) {
  background-color: #57534e;
  border-color: #57534e;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(120, 113, 108, 0.3);
}

.my-btn-stone:active:not(:disabled) {
  background-color: #44403c;
  border-color: #44403c;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(120, 113, 108, 0.2);
}

.my-btn-neutral {
  background-color: #737373;
  color: #ffffff;
  border-color: #737373;
}

.my-btn-neutral:hover:not(:disabled) {
  background-color: #525252;
  border-color: #525252;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(115, 115, 115, 0.3);
}

.my-btn-neutral:active:not(:disabled) {
  background-color: #404040;
  border-color: #404040;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(115, 115, 115, 0.2);
}

/* Button Sizes */
.my-btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  border-radius: 0.25rem;
}

.my-btn-md {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0.375rem;
}

.my-btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  border-radius: 0.5rem;
}

.my-btn-xl {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  border-radius: 0.5rem;
}

.my-btn-2xl {
  padding: 1.25rem 2.5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  border-radius: 0.75rem;
}

.my-btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  line-height: 0.875rem;
  border-radius: 0.25rem;
}

.my-btn-xxs {
  padding: 0.125rem 0.25rem;
  font-size: 0.5rem;
  line-height: 0.75rem;
  border-radius: 0.125rem;
}

/* Button Shapes */
.my-btn-rounded {
  border-radius: 9999px;
}

.my-btn-square {
  border-radius: 0;
}

.my-btn-circle {
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}

/* Animated Buttons */
.my-btn-animated {
  position: relative;
  overflow: hidden;
}

.my-btn-animated::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.my-btn-animated:hover::before {
  left: 100%;
}

.my-btn-loading {
  position: relative;
  color: transparent;
}

.my-btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: fx-spin 1s linear infinite;
}

/* Button States */
.my-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.my-btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.my-btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: fx-spin 1s linear infinite;
}

.my-btn-success-state {
  background-color: #22c55e;
  color: #ffffff;
  border-color: #22c55e;
}

.my-btn-error-state {
  background-color: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

.my-btn-warning-state {
  background-color: #f59e0b;
  color: #ffffff;
  border-color: #f59e0b;
}

.my-btn-info-state {
  background-color: #06b6d4;
  color: #ffffff;
  border-color: #06b6d4;
}

/* Button Effects */
.my-btn-glow {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.my-btn-glow:hover {
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.7);
}

.my-btn-glow-success {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

.my-btn-glow-success:hover {
  box-shadow: 0 0 30px rgba(34, 197, 94, 0.7);
}

.my-btn-glow-error {
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.my-btn-glow-error:hover {
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.7);
}

.my-btn-glow-warning {
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

.my-btn-glow-warning:hover {
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.7);
}

.my-btn-glow-info {
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

.my-btn-glow-info:hover {
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.7);
}

.my-btn-glow-purple {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.my-btn-glow-purple:hover {
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.7);
}

.my-btn-glow-pink {
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
}

.my-btn-glow-pink:hover {
  box-shadow: 0 0 30px rgba(236, 72, 153, 0.7);
}

.my-btn-glow-indigo {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

.my-btn-glow-indigo:hover {
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.7);
}

.my-btn-glow-teal {
  box-shadow: 0 0 20px rgba(20, 184, 166, 0.5);
}

.my-btn-glow-teal:hover {
  box-shadow: 0 0 30px rgba(20, 184, 166, 0.7);
}

.my-btn-glow-orange {
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.5);
}

.my-btn-glow-orange:hover {
  box-shadow: 0 0 30px rgba(249, 115, 22, 0.7);
}

.my-btn-glow-rose {
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.5);
}

.my-btn-glow-rose:hover {
  box-shadow: 0 0 30px rgba(244, 63, 94, 0.7);
}

.my-btn-glow-slate {
  box-shadow: 0 0 20px rgba(100, 116, 139, 0.5);
}

.my-btn-glow-slate:hover {
  box-shadow: 0 0 30px rgba(100, 116, 139, 0.7);
}

.my-btn-glow-zinc {
  box-shadow: 0 0 20px rgba(113, 113, 122, 0.5);
}

.my-btn-glow-zinc:hover {
  box-shadow: 0 0 30px rgba(113, 113, 122, 0.7);
}

.my-btn-glow-stone {
  box-shadow: 0 0 20px rgba(120, 113, 108, 0.5);
}

.my-btn-glow-stone:hover {
  box-shadow: 0 0 30px rgba(120, 113, 108, 0.7);
}

.my-btn-glow-neutral {
  box-shadow: 0 0 20px rgba(115, 115, 115, 0.5);
}

.my-btn-glow-neutral:hover {
  box-shadow: 0 0 30px rgba(115, 115, 115, 0.7);
}

/* Button Groups */
.my-btn-group {
  display: inline-flex;
  vertical-align: middle;
}

.my-btn-group .my-btn {
  border-radius: 0;
  border-right-width: 0;
}

.my-btn-group .my-btn:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.my-btn-group .my-btn:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border-right-width: 1px;
}

.my-btn-group .my-btn:only-child {
  border-radius: 0.375rem;
  border-right-width: 1px;
}

/* Icon Buttons */
.my-btn-icon {
  padding: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
}

.my-btn-icon.my-btn-sm {
  padding: 0.375rem;
  width: 2rem;
  height: 2rem;
}

.my-btn-icon.my-btn-lg {
  padding: 0.75rem;
  width: 3rem;
  height: 3rem;
}

/* Floating Action Button */
.my-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 50;
}

.my-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Button Animations */
.my-btn-bounce {
  animation: fx-bounce 0.5s ease-in-out;
}

.my-btn-pulse {
  animation: fx-pulse 2s infinite;
}

.my-btn-shake {
  animation: fx-shake 0.5s ease-in-out;
}

.my-btn-wiggle {
  animation: fx-wiggle 0.5s ease-in-out;
}

.my-btn-flip {
  animation: fx-flip 0.5s ease-in-out;
}

.my-btn-rotate {
  animation: fx-rotate 0.5s ease-in-out;
}

.my-btn-scale {
  animation: fx-scale 0.5s ease-in-out;
}

.my-btn-slide {
  animation: fx-slide 0.5s ease-in-out;
}

.my-btn-fade {
  animation: fx-fade 0.5s ease-in-out;
}

.my-btn-zoom {
  animation: fx-zoom 0.5s ease-in-out;
}

.my-btn-elastic {
  animation: fx-elastic 0.5s ease-in-out;
}

.my-btn-back {
  animation: fx-back 0.5s ease-in-out;
}

.my-btn-bounce-in {
  animation: fx-bounce-in 0.5s ease-in-out;
}

.my-btn-bounce-out {
  animation: fx-bounce-out 0.5s ease-in-out;
}

.my-btn-flip-in {
  animation: fx-flip-in 0.5s ease-in-out;
}

.my-btn-flip-out {
  animation: fx-flip-out 0.5s ease-in-out;
}

.my-btn-rotate-in {
  animation: fx-rotate-in 0.5s ease-in-out;
}

.my-btn-rotate-out {
  animation: fx-rotate-out 0.5s ease-in-out;
}

.my-btn-scale-in {
  animation: fx-scale-in 0.5s ease-in-out;
}

.my-btn-scale-out {
  animation: fx-scale-out 0.5s ease-in-out;
}

.my-btn-slide-in {
  animation: fx-slide-in 0.5s ease-in-out;
}

.my-btn-slide-out {
  animation: fx-slide-out 0.5s ease-in-out;
}

.my-btn-fade-in {
  animation: fx-fade-in 0.5s ease-in-out;
}

.my-btn-fade-out {
  animation: fx-fade-out 0.5s ease-in-out;
}

.my-btn-zoom-in {
  animation: fx-zoom-in 0.5s ease-in-out;
}

.my-btn-zoom-out {
  animation: fx-zoom-out 0.5s ease-in-out;
}

.my-btn-elastic-in {
  animation: fx-elastic-in 0.5s ease-in-out;
}

.my-btn-elastic-out {
  animation: fx-elastic-out 0.5s ease-in-out;
}

.my-btn-back-in {
  animation: fx-back-in 0.5s ease-in-out;
}

.my-btn-back-out {
  animation: fx-back-out 0.5s ease-in-out;
}

/* Button Hover Effects */
.my-btn-hover-bounce:hover {
  animation: fx-bounce 0.5s ease-in-out;
}

.my-btn-hover-pulse:hover {
  animation: fx-pulse 2s infinite;
}

.my-btn-hover-shake:hover {
  animation: fx-shake 0.5s ease-in-out;
}

.my-btn-hover-wiggle:hover {
  animation: fx-wiggle 0.5s ease-in-out;
}

.my-btn-hover-flip:hover {
  animation: fx-flip 0.5s ease-in-out;
}

.my-btn-hover-rotate:hover {
  animation: fx-rotate 0.5s ease-in-out;
}

.my-btn-hover-scale:hover {
  animation: fx-scale 0.5s ease-in-out;
}

.my-btn-hover-slide:hover {
  animation: fx-slide 0.5s ease-in-out;
}

.my-btn-hover-fade:hover {
  animation: fx-fade 0.5s ease-in-out;
}

.my-btn-hover-zoom:hover {
  animation: fx-zoom 0.5s ease-in-out;
}

.my-btn-hover-elastic:hover {
  animation: fx-elastic 0.5s ease-in-out;
}

.my-btn-hover-back:hover {
  animation: fx-back 0.5s ease-in-out;
}

/* Button Focus Effects */
.my-btn-focus-bounce:focus {
  animation: fx-bounce 0.5s ease-in-out;
}

.my-btn-focus-pulse:focus {
  animation: fx-pulse 2s infinite;
}

.my-btn-focus-shake:focus {
  animation: fx-shake 0.5s ease-in-out;
}

.my-btn-focus-wiggle:focus {
  animation: fx-wiggle 0.5s ease-in-out;
}

.my-btn-focus-flip:focus {
  animation: fx-flip 0.5s ease-in-out;
}

.my-btn-focus-rotate:focus {
  animation: fx-rotate 0.5s ease-in-out;
}

.my-btn-focus-scale:focus {
  animation: fx-scale 0.5s ease-in-out;
}

.my-btn-focus-slide:focus {
  animation: fx-slide 0.5s ease-in-out;
}

.my-btn-focus-fade:focus {
  animation: fx-fade 0.5s ease-in-out;
}

.my-btn-focus-zoom:focus {
  animation: fx-zoom 0.5s ease-in-out;
}

.my-btn-focus-elastic:focus {
  animation: fx-elastic 0.5s ease-in-out;
}

.my-btn-focus-back:focus {
  animation: fx-back 0.5s ease-in-out;
}

/* Button Active Effects */
.my-btn-active-bounce:active {
  animation: fx-bounce 0.5s ease-in-out;
}

.my-btn-active-pulse:active {
  animation: fx-pulse 2s infinite;
}

.my-btn-active-shake:active {
  animation: fx-shake 0.5s ease-in-out;
}

.my-btn-active-wiggle:active {
  animation: fx-wiggle 0.5s ease-in-out;
}

.my-btn-active-flip:active {
  animation: fx-flip 0.5s ease-in-out;
}

.my-btn-active-rotate:active {
  animation: fx-rotate 0.5s ease-in-out;
}

.my-btn-active-scale:active {
  animation: fx-scale 0.5s ease-in-out;
}

.my-btn-active-slide:active {
  animation: fx-slide 0.5s ease-in-out;
}

.my-btn-active-fade:active {
  animation: fx-fade 0.5s ease-in-out;
}

.my-btn-active-zoom:active {
  animation: fx-zoom 0.5s ease-in-out;
}

.my-btn-active-elastic:active {
  animation: fx-elastic 0.5s ease-in-out;
}

.my-btn-active-back:active {
  animation: fx-back 0.5s ease-in-out;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .my-btn-secondary {
    background-color: #374151;
    color: #f3f4f6;
    border-color: #4b5563;
  }

  .my-btn-secondary:hover:not(:disabled) {
    background-color: #4b5563;
    border-color: #6b7280;
  }

  .my-btn-ghost {
    color: #9ca3af;
  }

  .my-btn-ghost:hover:not(:disabled) {
    background-color: #374151;
    color: #f3f4f6;
  }
}

.dark .my-btn-secondary {
  background-color: #374151;
  color: #f3f4f6;
  border-color: #4b5563;
}

.dark .my-btn-secondary:hover:not(:disabled) {
  background-color: #4b5563;
  border-color: #6b7280;
}

.dark .my-btn-ghost {
  color: #9ca3af;
}

.dark .my-btn-ghost:hover:not(:disabled) {
  background-color: #374151;
  color: #f3f4f6;
}

/* Button Animation Keyframes */
@keyframes fx-bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

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

@keyframes fx-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

@keyframes fx-wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

@keyframes fx-flip {
  0% {
    transform: perspective(400px) rotateY(0);
  }
  40% {
    transform: perspective(400px) rotateY(-90deg);
  }
  60% {
    transform: perspective(400px) rotateY(-90deg);
  }
  100% {
    transform: perspective(400px) rotateY(0);
  }
}

@keyframes fx-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fx-scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fx-slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes fx-fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fx-zoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fx-elastic {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.25);
  }
  40% {
    transform: scale(0.75);
  }
  50% {
    transform: scale(1.15);
  }
  65% {
    transform: scale(0.95);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fx-back {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes fx-bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fx-bounce-out {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes fx-flip-in {
  0% {
    opacity: 0;
    transform: perspective(400px) rotateY(-90deg);
  }
  100% {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
  }
}

@keyframes fx-flip-out {
  0% {
    transform: perspective(400px) rotateY(0);
  }
  100% {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
}

@keyframes fx-rotate-in {
  0% {
    opacity: 0;
    transform: rotate(-200deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}

@keyframes fx-rotate-out {
  0% {
    transform: rotate(0);
  }
  100% {
    opacity: 0;
    transform: rotate(200deg);
  }
}

@keyframes fx-scale-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fx-scale-out {
  0% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes fx-slide-in {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fx-slide-out {
  0% {
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes fx-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fx-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fx-zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fx-zoom-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes fx-elastic-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fx-elastic-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes fx-back-in {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fx-back-out {
  0% {
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100px);
  }
}