/** * ShopKart Image Button — Frontend Styles * * Structural defaults only. Visual values (typography, colors, padding, * border, radius, shadows, etc.) come from Elementor's `selectors` API * which writes per-instance CSS in the page . * * HTML structure: * .sksa-btn-wrap — flex wrapper, handles horizontal alignment * .sksa-btn — the button itself, holds background-image * .sksa-btn-overlay — absolute fill, color/blur layer above image * .sksa-btn-text — relative, sits above overlay (z-index) */ .sksa-btn-wrap { display: flex; width: 100%; } .sksa-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; background-color: transparent; background-size: cover; background-position: center; background-repeat: no-repeat; border-style: solid; border-width: 0; box-sizing: border-box; transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease; -webkit-tap-highlight-color: transparent; } .sksa-btn, .sksa-btn:hover, .sksa-btn:focus, .sksa-btn:active, .sksa-btn:visited { text-decoration: none !important; box-shadow: none; } .sksa-btn-overlay { position: absolute; inset: 0; z-index: 1; background-color: transparent; pointer-events: none; transition: background-color 0.25s ease, opacity 0.25s ease, backdrop-filter 0.25s ease; } .sksa-btn-text { position: relative; z-index: 2; line-height: 1.4; display: inline-block; } /* Hover effect presets */ .sksa-btn.sksa-fx-lift:hover { transform: translateY(-2px); } .sksa-btn.sksa-fx-zoom:hover { transform: scale(1.03); } .sksa-btn.sksa-fx-dim:hover { opacity: 0.88; } .sksa-btn.sksa-fx-none:hover {} .sksa-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }