/* Base wrapper */ .wcbab-buttons{ display:flex !important; width: 100% !important; box-sizing: border-box; flex: 1 1 100% !important; gap: var(--wcbab-gap, 10px); align-items: stretch; flex-wrap: nowrap !important; margin: 10px 0; min-width: 0 !important; } /* Layout (apply on the flex container itself). Some themes also add layout classes on , so we scope to .wcbab-buttons. */ .wcbab-buttons.wcbab-layout-inline{ flex-direction: row !important; flex-wrap: nowrap !important; } .wcbab-buttons.wcbab-layout-stack{ flex-direction: column !important; } /* Stack layout: allow multi-line labels if needed */ .wcbab-buttons.wcbab-layout-stack .wcbab-btn{ white-space: nowrap; text-overflow: ellipsis; } .wcbab-buttons .wcbab-btn, .wcbab-buttons a.button, .wcbab-buttons button.button, .wcbab-buttons input.button{ position: relative; overflow: hidden; isolation: isolate; display:inline-flex; align-items:center; justify-content:center; font-size: var(--wcbab-font-size, 16px) !important; padding: var(--wcbab-pad-y, 14px) var(--wcbab-pad-x, 18px) !important; border-radius: var(--wcbab-radius, 12px) !important; border: none !important; text-decoration: none !important; line-height: 1.1 !important; min-height: 44px; width: auto !important; flex: 0 1 auto; min-width: 0 !important; white-space: nowrap; word-break: normal; overflow: hidden; text-overflow: ellipsis; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; } /* Keep pseudo-element overlays below content/spinner */ .wcbab-buttons .wcbab-btn:before, .wcbab-buttons .wcbab-btn:after{ z-index: 1; } .wcbab-buttons .wcbab-label{ position: relative; z-index: 2; } .wcbab-buttons .wcbab-icon{ position: relative; z-index: 2; display:inline-flex; align-items:center; justify-content:center; flex: 0 0 auto; width: var(--wcbab-icon-size, 18px); height: var(--wcbab-icon-size, 18px); } .wcbab-buttons .wcbab-icon svg{ width:100%; height:100%; display:block; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .wcbab-buttons .wcbab-icon.pos-left{ margin-right: var(--wcbab-icon-gap, 8px); margin-left: 0; } .wcbab-buttons .wcbab-icon.pos-right{ margin-left: var(--wcbab-icon-gap, 8px); margin-right: 0; } .wcbab-buttons .wcbab-loading .wcbab-icon{ visibility: hidden; } .wcbab-buttons .wcbab-spinner{ z-index: 3; } /* Width modes */ .wcbab-width-full.wcbab-buttons > .wcbab-btn, .wcbab-width-full.wcbab-buttons > a.button, .wcbab-width-full.wcbab-buttons > button.button, .wcbab-width-full.wcbab-buttons > input.button{ flex: 1 1 0 !important; width: 100% !important; min-width: 0 !important; } .wcbab-width-content.wcbab-buttons > .wcbab-btn, .wcbab-width-content.wcbab-buttons > a.button, .wcbab-width-content.wcbab-buttons > button.button, .wcbab-width-content.wcbab-buttons > input.button{ flex: 0 0 auto !important; width: auto !important; } .wcbab-width-custom .wcbab-btn-add{ width: var(--wcbab-add-width, 50%) !important; flex: 0 0 var(--wcbab-add-width, 50%) !important; } .wcbab-width-custom .wcbab-btn-buy{ width: var(--wcbab-buy-width, 50%) !important; flex: 0 0 var(--wcbab-buy-width, 50%) !important; } /* Add-to-cart button (works even if JS can't add helper classes) */ .wcbab-buttons .wcbab-btn-add, .wcbab-buttons button.single_add_to_cart_button, .wcbab-buttons input.single_add_to_cart_button, .wcbab-buttons button[name="add-to-cart"], .wcbab-buttons input[name="add-to-cart"], .wcbab-buttons a.add_to_cart_button, .wcbab-buttons a.button.add_to_cart_button, .wcbab-buttons a.ajax_add_to_cart, .wcbab-buttons button.add_to_cart_button{ background: var(--wcbab-add-bg, #0f1a2b) !important; background-color: var(--wcbab-add-bg, #0f1a2b) !important; background-image: none !important; color: var(--wcbab-add-text, #fff) !important; } .wcbab-buttons .wcbab-btn-add:hover, .wcbab-buttons button.single_add_to_cart_button:hover, .wcbab-buttons input.single_add_to_cart_button:hover, .wcbab-buttons button[name="add-to-cart"]:hover, .wcbab-buttons input[name="add-to-cart"]:hover, .wcbab-buttons a.add_to_cart_button:hover, .wcbab-buttons a.button.add_to_cart_button:hover, .wcbab-buttons a.ajax_add_to_cart:hover, .wcbab-buttons button.add_to_cart_button:hover{ background: var(--wcbab-add-bg-hover, #0b1220) !important; background-color: var(--wcbab-add-bg-hover, #0b1220) !important; background-image: none !important; color: var(--wcbab-add-text-hover, #fff) !important; } /* Buy-now button */ .wcbab-buttons .wcbab-btn-buy, .wcbab-buttons a.wcbab-buy-link, .wcbab-buttons button[name="wcbab_buy_now"], .wcbab-buttons input[name="wcbab_buy_now"]{ background: var(--wcbab-buy-bg, #ff7a00) !important; background-color: var(--wcbab-buy-bg, #ff7a00) !important; background-image: none !important; color: var(--wcbab-buy-text, #fff) !important; } .wcbab-buttons .wcbab-btn-buy:hover, .wcbab-buttons a.wcbab-buy-link:hover, .wcbab-buttons button[name="wcbab_buy_now"]:hover, .wcbab-buttons input[name="wcbab_buy_now"]:hover{ background: var(--wcbab-buy-bg-hover, #ff5f00) !important; background-color: var(--wcbab-buy-bg-hover, #ff5f00) !important; background-image: none !important; color: var(--wcbab-buy-text-hover, #fff) !important; } /* ===== Loading spinner (inside button) ===== */ .wcbab-buttons .wcbab-spinner{ display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.9); border-right-color: transparent; border-radius: 50%; animation: wcbab_spin .7s linear infinite; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 5; } .wcbab-buttons .wcbab-loading{ pointer-events: none !important; cursor: wait !important; opacity: .9; } .wcbab-buttons .wcbab-loading .wcbab-spinner{ display: block; } .wcbab-buttons .wcbab-loading .wcbab-label{ visibility: hidden; } /* Prevent double spinners: WooCommerce (and many themes) add their own loading spinner via ::after/::before when a button/link has the `.loading` class. We show our own centered spinner via `.wcbab-spinner`, so we hide the default one inside our wrapper. */ .wcbab-buttons a.loading::after, .wcbab-buttons a.loading::before, .wcbab-buttons button.loading::after, .wcbab-buttons button.loading::before, .wcbab-buttons .wcbab-btn.loading::after, .wcbab-buttons .wcbab-btn.loading::before{ content: none !important; display: none !important; } @keyframes wcbab_spin{ 0%{ transform: translate(-50%, -50%) rotate(0deg); } 100%{ transform: translate(-50%, -50%) rotate(360deg); } } /* Shadow / glow */ .wcbab-shadow .wcbab-btn{ box-shadow: 0 10px 22px rgba(2,6,23,.12), 0 2px 6px rgba(2,6,23,.10); } .wcbab-glow .wcbab-btn:hover{ box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 12px 28px rgba(2,6,23,.16), 0 0 18px rgba(255,122,0,.18); } /* ====== STYLE PRESETS (pure visual, not animation) ====== */ .wcbab-style-1 .wcbab-btn{ border-radius: 10px !important; } .wcbab-style-2 .wcbab-btn{ border-radius: 16px !important; filter: saturate(1.02); } .wcbab-style-3 .wcbab-btn{ background: transparent !important; border: 2px solid currentColor !important; } .wcbab-style-3 .wcbab-btn-add{ color: var(--wcbab-add-bg, #0f1a2b) !important; } .wcbab-style-3 .wcbab-btn-buy{ color: var(--wcbab-buy-bg, #ff7a00) !important; } .wcbab-style-4 .wcbab-btn{ backdrop-filter: blur(8px); } .wcbab-style-5 .wcbab-btn{ transform: translateZ(0); } .wcbab-style-6 .wcbab-btn{ box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.18); } .wcbab-style-7 .wcbab-btn{ border-bottom: 3px solid rgba(255,255,255,.22); } /* Style 8: Glossy capsule (Premium) */ .wcbab-style-8 .wcbab-btn{ border-radius: 999px !important; box-shadow: 0 16px 30px rgba(2,6,23,.14), 0 4px 10px rgba(2,6,23,.12) !important; } .wcbab-style-8 .wcbab-btn:before{ content:""; position:absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)); transform: translateY(-42%); pointer-events:none; } .wcbab-style-8 .wcbab-btn:after{ content:""; position:absolute; inset: 1px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -10px 18px rgba(0,0,0,.14); pointer-events:none; } /* Style 9: Angled cut (Modern) */ .wcbab-style-9 .wcbab-btn{ border-radius: 12px !important; clip-path: polygon(0 0, 96% 0, 100% 50%, 96% 100%, 0 100%, 4% 50%); box-shadow: 0 14px 26px rgba(2,6,23,.14), 0 4px 10px rgba(2,6,23,.10) !important; } .wcbab-style-9 .wcbab-btn:after{ content:""; position:absolute; inset: 1px; clip-path: polygon(0 0, 96% 0, 100% 50%, 96% 100%, 0 100%, 4% 50%); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -10px 18px rgba(0,0,0,.18); pointer-events:none; } /* ====== ANIMATIONS ====== */ .wcbab-anim .wcbab-btn, .wcbab-anim .single_add_to_cart_button, .wcbab-anim .add_to_cart_button, .wcbab-anim .ajax_add_to_cart, .wcbab-anim [name="wcbab_buy_now"], .wcbab-anim .wcbab-buy-link{ --dur: var(--wcbab-anim-dur, 1.2s); } .wcbab-anim-mode-hover.wcbab-anim .wcbab-btn{ } .wcbab-anim-mode-hover.wcbab-anim .wcbab-btn:before, .wcbab-anim-mode-hover.wcbab-anim .wcbab-btn:after{ } /* --- Shine (overlay-based; reliable with enforced colors & theme gradients) --- */ .wcbab-buttons .wcbab-shine{ display:none; position:absolute; top:0; left:0; height:100%; width:60%; transform: translateX(-220%) skewX(-20deg); background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 65%, rgba(255,255,255,0) 100%); pointer-events:none; z-index: 1; opacity:.85; mix-blend-mode: screen; } /* Show shine layer only when Shine animation is enabled */ .wcbab-anim-shine .wcbab-buttons .wcbab-shine, .wcbab-buttons.wcbab-anim-shine .wcbab-shine{ display:block; } /* Always mode */ .wcbab-anim-mode-always.wcbab-anim-shine .wcbab-buttons .wcbab-shine, .wcbab-buttons.wcbab-anim-mode-always.wcbab-anim-shine .wcbab-shine{ animation: wcbab_shine var(--wcbab-anim-dur, 1.2s) linear infinite; } /* Hover mode */ .wcbab-anim-mode-hover.wcbab-anim-shine .wcbab-buttons .wcbab-btn:hover .wcbab-shine, .wcbab-buttons.wcbab-anim-mode-hover.wcbab-anim-shine .wcbab-btn:hover .wcbab-shine, .wcbab-anim-mode-hover.wcbab-anim-shine .wcbab-buttons .single_add_to_cart_button:hover .wcbab-shine, .wcbab-anim-mode-hover.wcbab-anim-shine .wcbab-buttons .add_to_cart_button:hover .wcbab-shine, .wcbab-anim-mode-hover.wcbab-anim-shine .wcbab-buttons .ajax_add_to_cart:hover .wcbab-shine, .wcbab-anim-mode-hover.wcbab-anim-shine .wcbab-buttons .wcbab-buy-link:hover .wcbab-shine, .wcbab-anim-mode-hover.wcbab-anim-shine .wcbab-buttons [name="wcbab_buy_now"]:hover .wcbab-shine{ animation: wcbab_shine var(--wcbab-anim-dur, 1.2s) linear infinite; } @keyframes wcbab_shine{ 0%{ transform: translateX(-220%) skewX(-20deg); } 100%{ transform: translateX(220%) skewX(-20deg); } } .wcbab-anim-pulse .wcbab-btn, .wcbab-anim-pulse .single_add_to_cart_button, .wcbab-anim-pulse .add_to_cart_button, .wcbab-anim-pulse .ajax_add_to_cart, .wcbab-anim-pulse [name="wcbab_buy_now"], .wcbab-anim-pulse .wcbab-buy-link{ transform: translateZ(0); } .wcbab-anim-mode-always.wcbab-anim-pulse .wcbab-btn, .wcbab-anim-mode-always.wcbab-anim-pulse .single_add_to_cart_button, .wcbab-anim-mode-always.wcbab-anim-pulse .add_to_cart_button, .wcbab-anim-mode-always.wcbab-anim-pulse .ajax_add_to_cart, .wcbab-anim-mode-always.wcbab-anim-pulse [name="wcbab_buy_now"], .wcbab-anim-mode-always.wcbab-anim-pulse .wcbab-buy-link{ animation-name: wcbab_pulse; animation-duration: var(--wcbab-anim-dur, 1.2s) !important; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .wcbab-anim-mode-hover.wcbab-anim-pulse .wcbab-btn:hover, .wcbab-anim-mode-hover.wcbab-anim-pulse .single_add_to_cart_button:hover, .wcbab-anim-mode-hover.wcbab-anim-pulse .add_to_cart_button:hover, .wcbab-anim-mode-hover.wcbab-anim-pulse .ajax_add_to_cart:hover, .wcbab-anim-mode-hover.wcbab-anim-pulse [name="wcbab_buy_now"]:hover, .wcbab-anim-mode-hover.wcbab-anim-pulse .wcbab-buy-link:hover{ animation-name: wcbab_pulse; animation-duration: var(--wcbab-anim-dur, 1.2s) !important; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes wcbab_pulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.03); } } .wcbab-anim-lift .wcbab-btn:hover, .wcbab-anim-lift .single_add_to_cart_button:hover, .wcbab-anim-lift .add_to_cart_button:hover, .wcbab-anim-lift .ajax_add_to_cart:hover, .wcbab-anim-lift [name="wcbab_buy_now"]:hover, .wcbab-anim-lift .wcbab-buy-link:hover{ transform: translateY(-1px); } .wcbab-anim-mode-always.wcbab-anim-lift .wcbab-btn, .wcbab-anim-mode-always.wcbab-anim-lift .single_add_to_cart_button, .wcbab-anim-mode-always.wcbab-anim-lift .add_to_cart_button, .wcbab-anim-mode-always.wcbab-anim-lift .ajax_add_to_cart, .wcbab-anim-mode-always.wcbab-anim-lift [name="wcbab_buy_now"], .wcbab-anim-mode-always.wcbab-anim-lift .wcbab-buy-link{ animation-name: wcbab_lift; animation-duration: var(--wcbab-anim-dur, 1.2s) !important; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .wcbab-anim-mode-hover.wcbab-anim-lift .wcbab-btn:hover, .wcbab-anim-mode-hover.wcbab-anim-lift .single_add_to_cart_button:hover, .wcbab-anim-mode-hover.wcbab-anim-lift .add_to_cart_button:hover, .wcbab-anim-mode-hover.wcbab-anim-lift .ajax_add_to_cart:hover, .wcbab-anim-mode-hover.wcbab-anim-lift [name="wcbab_buy_now"]:hover, .wcbab-anim-mode-hover.wcbab-anim-lift .wcbab-buy-link:hover{ animation-name: wcbab_lift; animation-duration: var(--wcbab-anim-dur, 1.2s) !important; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes wcbab_lift{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-2px); } } /* Make Woo loop add-to-cart align inside our wrapper */ .wcbab-loop .add_to_cart_button, .wcbab-loop a.add_to_cart_button{ margin: 0 !important; } /* === Text Animation (label) === */ @keyframes wcbab_text_wave{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-2px); } } @keyframes wcbab_text_pulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.05); } } @keyframes wcbab_text_slide{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(2px); } } /* Always mode */ .wcbab-text-anim-mode-always.wcbab-text-anim-wave .wcbab-buttons .wcbab-label, .wcbab-buttons.wcbab-text-anim-mode-always.wcbab-text-anim-wave .wcbab-label{ animation: wcbab_text_wave var(--wcbab-text-anim-dur, 1.2s) ease-in-out infinite; } .wcbab-text-anim-mode-always.wcbab-text-anim-pulse .wcbab-buttons .wcbab-label, .wcbab-buttons.wcbab-text-anim-mode-always.wcbab-text-anim-pulse .wcbab-label{ animation: wcbab_text_pulse var(--wcbab-text-anim-dur, 1.2s) ease-in-out infinite; } .wcbab-text-anim-mode-always.wcbab-text-anim-slide .wcbab-buttons .wcbab-label, .wcbab-buttons.wcbab-text-anim-mode-always.wcbab-text-anim-slide .wcbab-label{ animation: wcbab_text_slide var(--wcbab-text-anim-dur, 1.2s) ease-in-out infinite; } /* Hover mode (supported if enabled later) */ .wcbab-text-anim-mode-hover.wcbab-text-anim-wave .wcbab-buttons .wcbab-btn:hover .wcbab-label, .wcbab-buttons.wcbab-text-anim-mode-hover.wcbab-text-anim-wave .wcbab-btn:hover .wcbab-label{ animation: wcbab_text_wave var(--wcbab-text-anim-dur, 1.2s) ease-in-out infinite; } .wcbab-text-anim-mode-hover.wcbab-text-anim-pulse .wcbab-buttons .wcbab-btn:hover .wcbab-label, .wcbab-buttons.wcbab-text-anim-mode-hover.wcbab-text-anim-pulse .wcbab-btn:hover .wcbab-label{ animation: wcbab_text_pulse var(--wcbab-text-anim-dur, 1.2s) ease-in-out infinite; } .wcbab-text-anim-mode-hover.wcbab-text-anim-slide .wcbab-buttons .wcbab-btn:hover .wcbab-label, .wcbab-buttons.wcbab-text-anim-mode-hover.wcbab-text-anim-slide .wcbab-btn:hover .wcbab-label{ animation: wcbab_text_slide var(--wcbab-text-anim-dur, 1.2s) ease-in-out infinite; }