Button Flipper
Animated buttons with flip effects on hover and interaction.
Basic Flipper Button
HTML
<button
class="flipper"
style="
position: relative;
padding: 14px 28px;
border: none;
background: var(--color_fill_primary);
color: white;
cursor: pointer;
overflow: hidden;
border-radius: 8px;
font-size: 16px;
perspective: 1000px;
"
>
<span
class="flipper--front"
style="display: block; transition: transform 0.3s"
>
Click Me
</span>
<span
class="flipper--back"
style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateX(90deg);
opacity: 0;
transition: all 0.3s;
"
>
Done! ✓
</span>
</button>Flip Directions
HTML
<div style="display: flex; gap: 16px; flex-wrap: wrap">
<!-- Flip Left -->
<button
class="flipper ss-c-flipper--left"
style="
position: relative;
min-width: 120px;
padding: 14px 24px;
border: 2px solid var(--color_fill_primary);
background: transparent;
color: var(--color_fill_primary);
cursor: pointer;
overflow: hidden;
border-radius: 8px;
transition: all 0.3s;
"
>
<span>Flip Left ←</span>
</button>
<!-- Flip Right -->
<button
class="flipper ss-c-flipper--right"
style="
position: relative;
min-width: 120px;
padding: 14px 24px;
border: 2px solid var(--color_fill_primary);
background: transparent;
color: var(--color_fill_primary);
cursor: pointer;
overflow: hidden;
border-radius: 8px;
transition: all 0.3s;
"
>
<span>Flip Right →</span>
</button>
<!-- Flip Up -->
<button
class="flipper ss-c-flipper--up"
style="
position: relative;
min-width: 120px;
padding: 14px 24px;
border: 2px solid var(--color_fill_primary);
background: transparent;
color: var(--color_fill_primary);
cursor: pointer;
overflow: hidden;
border-radius: 8px;
transition: all 0.3s;
"
>
<span>Flip Up ↑</span>
</button>
<!-- Flip Down -->
<button
class="flipper ss-c-flipper--down"
style="
position: relative;
min-width: 120px;
padding: 14px 24px;
border: 2px solid var(--color_fill_primary);
background: transparent;
color: var(--color_fill_primary);
cursor: pointer;
overflow: hidden;
border-radius: 8px;
transition: all 0.3s;
"
>
<span>Flip Down ↓</span>
</button>
</div>Icon Flipper
HTML
<div style="display: flex; gap: 16px; flex-wrap: wrap">
<button
class="flipper"
style="
position: relative;
width: 56px;
height: 56px;
border: none;
background: var(--color_state_success);
color: white;
cursor: pointer;
overflow: hidden;
border-radius: 50%;
font-size: 20px;
transition:
transform 0.3s,
box-shadow 0.3s;
"
>
<span class="flipper--front">✓</span>
</button>
<button
class="flipper"
style="
position: relative;
width: 56px;
height: 56px;
border: none;
background: var(--color_state_error);
color: white;
cursor: pointer;
overflow: hidden;
border-radius: 50%;
font-size: 20px;
transition:
transform 0.3s,
box-shadow 0.3s;
"
>
<span class="flipper--front">✕</span>
</button>
<button
class="flipper"
style="
position: relative;
width: 56px;
height: 56px;
border: none;
background: var(--color_state_info);
color: white;
cursor: pointer;
overflow: hidden;
border-radius: 50%;
font-size: 20px;
transition:
transform 0.3s,
box-shadow 0.3s;
"
>
<span class="flipper--front">ℹ</span>
</button>
</div>Toggle Flipper
HTML
<div style="display: flex; gap: 16px; flex-wrap: wrap">
<!-- Play/Pause Toggle -->
<button
class="flipper ss-c-toggle"
style="
position: relative;
width: 64px;
height: 64px;
border: 2px solid var(--color_fill_primary);
background: transparent;
color: var(--color_fill_primary);
cursor: pointer;
overflow: hidden;
border-radius: 12px;
font-size: 24px;
transition: all 0.3s;
"
data-state="play"
>
<span class="flipper--front">▶</span>
<span class="flipper--back" style="display: none">⏸</span>
</button>
<!-- Like Toggle -->
<button
class="flipper ss-c-toggle"
style="
position: relative;
width: 64px;
height: 64px;
border: 2px solid var(--color_state_error);
background: transparent;
color: var(--color_state_error);
cursor: pointer;
overflow: hidden;
border-radius: 12px;
font-size: 24px;
transition: all 0.3s;
"
>
<span class="flipper--front">♡</span>
<span class="flipper--back" style="display: none">♥</span>
</button>
<!-- Bookmark Toggle -->
<button
class="flipper ss-c-toggle"
style="
position: relative;
width: 64px;
height: 64px;
border: 2px solid var(--color_state_warning);
background: transparent;
color: var(--color_state_warning);
cursor: pointer;
overflow: hidden;
border-radius: 12px;
font-size: 24px;
transition: all 0.3s;
"
>
<span class="flipper--front">☆</span>
<span class="flipper--back" style="display: none">★</span>
</button>
</div>3D Card Flip
HTML
<div
class="flipper-card"
style="perspective: 1000px; width: 200px; height: 280px"
>
<div
style="
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
cursor: pointer;
"
>
<div
class="flipper--front"
style="
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: linear-gradient(
135deg,
var(--color_fill_primary),
var(--color_fill_secondary)
);
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
padding: 24px;
box-sizing: border-box;
"
>
<div style="font-size: 48px; margin-bottom: 16px">▭</div>
<div style="font-size: 18px; font-weight: 600">
Hover to Flip
</div>
</div>
<div
class="flipper--back"
style="
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform: rotateY(180deg);
background: var(--color_fill_secondary);
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
"
>
<div style="font-size: 24px; margin-bottom: 12px">✺</div>
<div
style="
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
"
>
Back Side
</div>
<p
style="
font-size: 13px;
opacity: 0.8;
text-align: center;
margin: 0;
"
>
This is the revealed content on the back of the card.
</p>
</div>
</div>
</div>