:root { --btn-green: #107e3e; /* cor normal */ --btn-green-2: #16944c; /* cor hover */ --btn-border: #242424; /* contorno */ --btn-shadow1: #0f5e36cc 0 -6px inset, rgba(178, 178, 178, 0.5) 2px 2px 0 inset, rgba(153, 153, 153, 0.5) -2px -8px 0 inset; --btn-shadow2: rgba(178, 178, 178, 0.5) 2px 2px 0 inset, rgba(153, 153, 153, 0.5) -2px -2px 0 inset; } .mp-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; background: var(--btn-green); border: 2px solid var(--btn-border); font: 700 14px/1.2 Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; padding: 10px 16px 14px; transition: background 0.1s, transform 0.1s; flex: 1 1 auto; min-width: 220px; max-width: 100%; box-sizing: border-box; } .mp-button::before { content: ""; display: inline-block; width: 24px; height: 24px; background: var(--button-image) center/contain no-repeat; image-rendering: pixelated; border: 2px solid var(--btn-border); flex-shrink: 0; } .mp-button::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: var(--btn-shadow1); transition: box-shadow 0.1s, background 0.1s; } .mp-button:hover:not(:active) { background: var(--btn-green-2); } .mp-button:active, .mp-button.active { transform: translateY(6px); } .mp-button:active::after, .mp-button.active::after { box-shadow: var(--btn-shadow2); background: rgba(0, 0, 0, 0.12); } .mp-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .mp-button a { color: inherit !important; text-decoration: none !important; } /* Layout responsivo */ .mp-button-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 8px; } /* Ajuste para telas pequenas */ @media (max-width: 480px) { .mp-button { font-size: 13px; padding: 8px 12px 12px; min-width: 160px; } .mp-button::before { width: 22px; height: 22px; } }