CSS
.tg-flip {
display: inline-flex;
align-items: center;
gap: 14px;
cursor: pointer;
font-family: "Inter", "Segoe UI", system-ui, sans-serif;
font-size: 14px;
color: #f0eeff;
user-select: none;
perspective: 400px;
}
.tg-flip-input {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.tg-flip-card {
position: relative;
width: 56px;
height: 30px;
transform-style: preserve-3d;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tg-flip-face {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
border-radius: 6px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.tg-flip-on {
background: linear-gradient(135deg, #2eb88a 0%, #1d9c70 100%);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.tg-flip-off {
background: linear-gradient(135deg, #4a4a52 0%, #2a2a30 100%);
color: #b8b6d4;
transform: rotateY(180deg);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.tg-flip-input:not(:checked) ~ .tg-flip-card {
transform: rotateY(180deg);
}
.tg-flip-input:focus-visible ~ .tg-flip-card {
outline: 2px solid #7c6cff;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.tg-flip-card { transition: none; }
}