32 CSS Floating Action Button Designs 07 / 32
Squircle FAB
Apple-style squircle (superellipse) floating action button with clip-path, size scale variants, and iOS home screen simulation.
The code
<div class="fb07">
<div class="fb07-header">
<h1>Squircle FAB — <em>2025 Design Trend</em></h1>
<p>Apple's superellipse icon shape applied to floating action buttons. The rounded square breaks from the ubiquitous circle while staying friendly and modern.</p>
</div>
<div class="fb07-scene">
<!-- Size progression -->
<div class="fb07-panel">
<span class="fb07-panel-title">Size scale — same shape</span>
<div class="fb07-btn-row" style="align-items:flex-end">
<button class="fb07-sqfab fb07-sqfab--sm fb07-sqfab--blue" aria-label="Small action">
<svg width="22" height="22" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
</button>
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--blue" aria-label="Medium action">
<svg width="28" height="28" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
</button>
<button class="fb07-sqfab fb07-sqfab--lg fb07-sqfab--blue" aria-label="Large action">
<svg width="36" height="36" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
</button>
<button class="fb07-sqfab fb07-sqfab--xl fb07-sqfab--blue" aria-label="XL action">
<svg width="44" height="44" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
</button>
</div>
<span class="fb07-panel-title" style="margin-top:8px">Color variants — hover for tilt</span>
<div class="fb07-btn-row">
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--indigo" aria-label="Indigo">
<svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
</button>
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--pink" aria-label="Pink">
<svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0112 5.09 5.5 5.5 0 0122 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
</button>
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--green" aria-label="Green">
<svg width="28" height="28" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
</button>
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--dark" aria-label="Dark">
<svg width="28" height="28" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
</button>
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--glass" aria-label="Glass">
<svg width="28" height="28" viewBox="0 0 24 24"><path d="M21 15.5a6.5 6.5 0 01-6.5 6.5 6.5 6.5 0 01-6.5-6.5V8h13v7.5zM6 1v6h13V1H6zm11 4H7V3h10v2z"/></svg>
</button>
</div>
</div>
<!-- iOS home screen simulation -->
<div class="fb07-panel">
<span class="fb07-panel-title">iOS-style home screen — squircle icons</span>
<div class="fb07-ios-screen">
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--blue" aria-label="Messages">
<svg width="26" height="26" viewBox="0 0 24 24"><path d="M20 2H4a2 2 0 00-2 2v18l4-4h14a2 2 0 002-2V4a2 2 0 00-2-2z"/></svg>
</button>
<span class="fb07-app-name">Messages</span>
</div>
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--pink" aria-label="Photos">
<svg width="26" height="26" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
</button>
<span class="fb07-app-name">Photos</span>
</div>
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--green" aria-label="Maps">
<svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 119.5 9a2.5 2.5 0 012.5 2.5z"/></svg>
</button>
<span class="fb07-app-name">Maps</span>
</div>
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--indigo" aria-label="Calendar">
<svg width="26" height="26" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm0 16H5V8h14v11z"/></svg>
</button>
<span class="fb07-app-name">Calendar</span>
</div>
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md" style="background:linear-gradient(145deg,#ff9f0a,#ff6b00);box-shadow:0 8px 28px rgba(255,107,0,.38);border-radius:27%" aria-label="Music">
<svg width="26" height="26" viewBox="0 0 24 24" fill="white"><path d="M12 3v10.55A4 4 0 1014 17V7h4V3h-6z"/></svg>
</button>
<span class="fb07-app-name">Music</span>
</div>
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md" style="background:linear-gradient(145deg,#30d158,#1ea446);box-shadow:0 8px 28px rgba(30,164,70,.38);border-radius:27%" aria-label="Health">
<svg width="26" height="26" viewBox="0 0 24 24" fill="white"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0112 5.09 5.5 5.5 0 0122 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
</button>
<span class="fb07-app-name">Health</span>
</div>
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md" style="background:linear-gradient(145deg,#64d2ff,#0a84ff);box-shadow:0 8px 28px rgba(10,132,255,.38);border-radius:27%" aria-label="Safari">
<svg width="26" height="26" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15H9V8h2v9zm4 0h-2V8h2v9z"/></svg>
</button>
<span class="fb07-app-name">Browser</span>
</div>
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--dark" aria-label="Settings">
<svg width="26" height="26" viewBox="0 0 24 24" fill="white"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.488.488 0 00-.59.22L2.74 8.87a.49.49 0 00.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 00-.12-.61l-2.01-1.58zM12 15.6a3.6 3.6 0 110-7.2 3.6 3.6 0 010 7.2z"/></svg>
</button>
<span class="fb07-app-name">Settings</span>
</div>
</div>
</div>
</div>
</div> <div class="fb07">
<div class="fb07-header">
<h1>Squircle FAB — <em>2025 Design Trend</em></h1>
<p>Apple's superellipse icon shape applied to floating action buttons. The rounded square breaks from the ubiquitous circle while staying friendly and modern.</p>
</div>
<div class="fb07-scene">
<!-- Size progression -->
<div class="fb07-panel">
<span class="fb07-panel-title">Size scale — same shape</span>
<div class="fb07-btn-row" style="align-items:flex-end">
<button class="fb07-sqfab fb07-sqfab--sm fb07-sqfab--blue" aria-label="Small action">
<svg width="22" height="22" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
</button>
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--blue" aria-label="Medium action">
<svg width="28" height="28" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
</button>
<button class="fb07-sqfab fb07-sqfab--lg fb07-sqfab--blue" aria-label="Large action">
<svg width="36" height="36" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
</button>
<button class="fb07-sqfab fb07-sqfab--xl fb07-sqfab--blue" aria-label="XL action">
<svg width="44" height="44" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
</button>
</div>
<span class="fb07-panel-title" style="margin-top:8px">Color variants — hover for tilt</span>
<div class="fb07-btn-row">
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--indigo" aria-label="Indigo">
<svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
</button>
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--pink" aria-label="Pink">
<svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0112 5.09 5.5 5.5 0 0122 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
</button>
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--green" aria-label="Green">
<svg width="28" height="28" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
</button>
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--dark" aria-label="Dark">
<svg width="28" height="28" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
</button>
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--glass" aria-label="Glass">
<svg width="28" height="28" viewBox="0 0 24 24"><path d="M21 15.5a6.5 6.5 0 01-6.5 6.5 6.5 6.5 0 01-6.5-6.5V8h13v7.5zM6 1v6h13V1H6zm11 4H7V3h10v2z"/></svg>
</button>
</div>
</div>
<!-- iOS home screen simulation -->
<div class="fb07-panel">
<span class="fb07-panel-title">iOS-style home screen — squircle icons</span>
<div class="fb07-ios-screen">
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--blue" aria-label="Messages">
<svg width="26" height="26" viewBox="0 0 24 24"><path d="M20 2H4a2 2 0 00-2 2v18l4-4h14a2 2 0 002-2V4a2 2 0 00-2-2z"/></svg>
</button>
<span class="fb07-app-name">Messages</span>
</div>
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--pink" aria-label="Photos">
<svg width="26" height="26" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
</button>
<span class="fb07-app-name">Photos</span>
</div>
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--green" aria-label="Maps">
<svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 119.5 9a2.5 2.5 0 012.5 2.5z"/></svg>
</button>
<span class="fb07-app-name">Maps</span>
</div>
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--indigo" aria-label="Calendar">
<svg width="26" height="26" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm0 16H5V8h14v11z"/></svg>
</button>
<span class="fb07-app-name">Calendar</span>
</div>
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md" style="background:linear-gradient(145deg,#ff9f0a,#ff6b00);box-shadow:0 8px 28px rgba(255,107,0,.38);border-radius:27%" aria-label="Music">
<svg width="26" height="26" viewBox="0 0 24 24" fill="white"><path d="M12 3v10.55A4 4 0 1014 17V7h4V3h-6z"/></svg>
</button>
<span class="fb07-app-name">Music</span>
</div>
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md" style="background:linear-gradient(145deg,#30d158,#1ea446);box-shadow:0 8px 28px rgba(30,164,70,.38);border-radius:27%" aria-label="Health">
<svg width="26" height="26" viewBox="0 0 24 24" fill="white"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0112 5.09 5.5 5.5 0 0122 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
</button>
<span class="fb07-app-name">Health</span>
</div>
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md" style="background:linear-gradient(145deg,#64d2ff,#0a84ff);box-shadow:0 8px 28px rgba(10,132,255,.38);border-radius:27%" aria-label="Safari">
<svg width="26" height="26" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15H9V8h2v9zm4 0h-2V8h2v9z"/></svg>
</button>
<span class="fb07-app-name">Browser</span>
</div>
<div class="fb07-app-icon-wrap">
<button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--dark" aria-label="Settings">
<svg width="26" height="26" viewBox="0 0 24 24" fill="white"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.488.488 0 00-.59.22L2.74 8.87a.49.49 0 00.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 00-.12-.61l-2.01-1.58zM12 15.6a3.6 3.6 0 110-7.2 3.6 3.6 0 010 7.2z"/></svg>
</button>
<span class="fb07-app-name">Settings</span>
</div>
</div>
</div>
</div>
</div>.fb07, .fb07 *, .fb07 *::before, .fb07 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb07 {
font-family: 'Inter', sans-serif;
background: #f5f5f7;
min-height: 100vh;
display: grid;
place-items: center;
padding: 40px 20px;
color: #1d1d1f;
}
.fb07-header {
text-align: center;
margin-bottom: 56px;
}
.fb07-header h1 {
font-size: clamp(1.8rem, 6vw, 3rem);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.1;
color: #1d1d1f;
}
.fb07-header h1 em { font-style: italic; color: #6e6e73; }
.fb07-header p {
margin-top: 12px;
color: #6e6e73;
font-size: .95rem;
max-width: 44ch;
margin-inline: auto;
line-height: 1.6;
}
/* ── squircle shape via clip-path (SVG superellipse) ── */
/* We approximate a squircle with a very high border-radius combined with aspect-ratio */
.fb07-sqfab {
position: relative;
border: none;
cursor: pointer;
display: grid;
place-items: center;
/* Squircle = border-radius ≈ 28-30% of size */
border-radius: 29%;
/* The clip-path gives a tighter squircle than border-radius alone */
clip-path: path('M60 0 C88 0 120 32 120 60 C120 88 88 120 60 120 C32 120 0 88 0 60 C0 32 32 0 60 0Z');
width: 120px;
height: 120px;
outline: none;
transition:
transform .22s cubic-bezier(.34,1.56,.64,1),
box-shadow .22s ease,
filter .22s ease;
}
/* simpler squircle for smaller sizes using rounded rectangle with 28% radius */
.fb07-sqfab--sm { width: 52px; height: 52px; border-radius: 26%; clip-path: none; }
.fb07-sqfab--md { width: 68px; height: 68px; border-radius: 27%; clip-path: none; }
.fb07-sqfab--lg { width: 88px; height: 88px; border-radius: 28%; clip-path: none; }
.fb07-sqfab--xl { width: 110px; height: 110px; border-radius: 29%; clip-path: none; }
.fb07-sqfab--blue {
background: linear-gradient(145deg, #007aff, #0055d4);
box-shadow: 0 8px 28px rgba(0,122,255,.38), inset 0 1px 0 rgba(255,255,255,.22);
}
.fb07-sqfab--blue:hover {
transform: scale(1.07) rotate(-3deg);
box-shadow: 0 16px 40px rgba(0,122,255,.5), inset 0 1px 0 rgba(255,255,255,.22);
filter: brightness(1.06);
}
.fb07-sqfab--blue:active { transform: scale(.96); }
.fb07-sqfab--indigo {
background: linear-gradient(145deg, #5856d6, #4240a8);
box-shadow: 0 8px 28px rgba(88,86,214,.38), inset 0 1px 0 rgba(255,255,255,.2);
}
.fb07-sqfab--indigo:hover {
transform: scale(1.07) rotate(3deg);
box-shadow: 0 16px 40px rgba(88,86,214,.5), inset 0 1px 0 rgba(255,255,255,.22);
}
.fb07-sqfab--indigo:active { transform: scale(.96); }
.fb07-sqfab--pink {
background: linear-gradient(145deg, #ff375f, #d70015);
box-shadow: 0 8px 28px rgba(255,55,95,.38), inset 0 1px 0 rgba(255,255,255,.2);
}
.fb07-sqfab--pink:hover {
transform: scale(1.07) rotate(-3deg);
box-shadow: 0 16px 40px rgba(255,55,95,.5), inset 0 1px 0 rgba(255,255,255,.22);
}
.fb07-sqfab--pink:active { transform: scale(.96); }
.fb07-sqfab--green {
background: linear-gradient(145deg, #34c759, #248a3d);
box-shadow: 0 8px 28px rgba(52,199,89,.38), inset 0 1px 0 rgba(255,255,255,.2);
}
.fb07-sqfab--green:hover {
transform: scale(1.07) rotate(3deg);
box-shadow: 0 16px 40px rgba(52,199,89,.5), inset 0 1px 0 rgba(255,255,255,.22);
}
.fb07-sqfab--green:active { transform: scale(.96); }
.fb07-sqfab--dark {
background: linear-gradient(145deg, #3a3a3c, #1c1c1e);
box-shadow: 0 8px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.fb07-sqfab--dark:hover {
transform: scale(1.07);
box-shadow: 0 16px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
}
.fb07-sqfab--dark:active { transform: scale(.96); }
.fb07-sqfab--glass {
background: rgba(255,255,255,.65);
backdrop-filter: blur(14px) saturate(180%);
border: 1px solid rgba(255,255,255,.8);
box-shadow: 0 8px 28px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.9);
}
.fb07-sqfab--glass:hover {
transform: scale(1.07);
box-shadow: 0 16px 40px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.9);
}
.fb07-sqfab svg { fill: #fff; pointer-events: none; }
.fb07-sqfab--glass svg { fill: #1d1d1f; }
/* gloss highlight on larger buttons */
.fb07-sqfab--xl::after, .fb07-sqfab--lg::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 46%;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
pointer-events: none;
}
/* ── layout ── */
.fb07-scene {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
width: min(860px, 100%);
}
.fb07-panel {
background: #fff;
border-radius: 22px;
padding: 36px;
display: flex;
flex-direction: column;
gap: 24px;
box-shadow: 0 2px 20px rgba(0,0,0,.07);
}
.fb07-panel-title {
font-size: .72rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #aeaeb2;
}
.fb07-icon-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
justify-items: center;
}
.fb07-btn-row {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
/* iOS-style home screen simulation */
.fb07-ios-screen {
background: linear-gradient(145deg, #1a3a8f, #6b21a8);
border-radius: 22px;
padding: 28px 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
justify-items: center;
}
.fb07-app-icon-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
}
.fb07-app-name {
font-size: .65rem;
color: rgba(255,255,255,.85);
text-align: center;
line-height: 1.2;
}
@media (max-width: 680px) {
.fb07-scene { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.fb07-sqfab { transition: none; }
} .fb07, .fb07 *, .fb07 *::before, .fb07 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb07 {
font-family: 'Inter', sans-serif;
background: #f5f5f7;
min-height: 100vh;
display: grid;
place-items: center;
padding: 40px 20px;
color: #1d1d1f;
}
.fb07-header {
text-align: center;
margin-bottom: 56px;
}
.fb07-header h1 {
font-size: clamp(1.8rem, 6vw, 3rem);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.1;
color: #1d1d1f;
}
.fb07-header h1 em { font-style: italic; color: #6e6e73; }
.fb07-header p {
margin-top: 12px;
color: #6e6e73;
font-size: .95rem;
max-width: 44ch;
margin-inline: auto;
line-height: 1.6;
}
/* ── squircle shape via clip-path (SVG superellipse) ── */
/* We approximate a squircle with a very high border-radius combined with aspect-ratio */
.fb07-sqfab {
position: relative;
border: none;
cursor: pointer;
display: grid;
place-items: center;
/* Squircle = border-radius ≈ 28-30% of size */
border-radius: 29%;
/* The clip-path gives a tighter squircle than border-radius alone */
clip-path: path('M60 0 C88 0 120 32 120 60 C120 88 88 120 60 120 C32 120 0 88 0 60 C0 32 32 0 60 0Z');
width: 120px;
height: 120px;
outline: none;
transition:
transform .22s cubic-bezier(.34,1.56,.64,1),
box-shadow .22s ease,
filter .22s ease;
}
/* simpler squircle for smaller sizes using rounded rectangle with 28% radius */
.fb07-sqfab--sm { width: 52px; height: 52px; border-radius: 26%; clip-path: none; }
.fb07-sqfab--md { width: 68px; height: 68px; border-radius: 27%; clip-path: none; }
.fb07-sqfab--lg { width: 88px; height: 88px; border-radius: 28%; clip-path: none; }
.fb07-sqfab--xl { width: 110px; height: 110px; border-radius: 29%; clip-path: none; }
.fb07-sqfab--blue {
background: linear-gradient(145deg, #007aff, #0055d4);
box-shadow: 0 8px 28px rgba(0,122,255,.38), inset 0 1px 0 rgba(255,255,255,.22);
}
.fb07-sqfab--blue:hover {
transform: scale(1.07) rotate(-3deg);
box-shadow: 0 16px 40px rgba(0,122,255,.5), inset 0 1px 0 rgba(255,255,255,.22);
filter: brightness(1.06);
}
.fb07-sqfab--blue:active { transform: scale(.96); }
.fb07-sqfab--indigo {
background: linear-gradient(145deg, #5856d6, #4240a8);
box-shadow: 0 8px 28px rgba(88,86,214,.38), inset 0 1px 0 rgba(255,255,255,.2);
}
.fb07-sqfab--indigo:hover {
transform: scale(1.07) rotate(3deg);
box-shadow: 0 16px 40px rgba(88,86,214,.5), inset 0 1px 0 rgba(255,255,255,.22);
}
.fb07-sqfab--indigo:active { transform: scale(.96); }
.fb07-sqfab--pink {
background: linear-gradient(145deg, #ff375f, #d70015);
box-shadow: 0 8px 28px rgba(255,55,95,.38), inset 0 1px 0 rgba(255,255,255,.2);
}
.fb07-sqfab--pink:hover {
transform: scale(1.07) rotate(-3deg);
box-shadow: 0 16px 40px rgba(255,55,95,.5), inset 0 1px 0 rgba(255,255,255,.22);
}
.fb07-sqfab--pink:active { transform: scale(.96); }
.fb07-sqfab--green {
background: linear-gradient(145deg, #34c759, #248a3d);
box-shadow: 0 8px 28px rgba(52,199,89,.38), inset 0 1px 0 rgba(255,255,255,.2);
}
.fb07-sqfab--green:hover {
transform: scale(1.07) rotate(3deg);
box-shadow: 0 16px 40px rgba(52,199,89,.5), inset 0 1px 0 rgba(255,255,255,.22);
}
.fb07-sqfab--green:active { transform: scale(.96); }
.fb07-sqfab--dark {
background: linear-gradient(145deg, #3a3a3c, #1c1c1e);
box-shadow: 0 8px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.fb07-sqfab--dark:hover {
transform: scale(1.07);
box-shadow: 0 16px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
}
.fb07-sqfab--dark:active { transform: scale(.96); }
.fb07-sqfab--glass {
background: rgba(255,255,255,.65);
backdrop-filter: blur(14px) saturate(180%);
border: 1px solid rgba(255,255,255,.8);
box-shadow: 0 8px 28px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.9);
}
.fb07-sqfab--glass:hover {
transform: scale(1.07);
box-shadow: 0 16px 40px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.9);
}
.fb07-sqfab svg { fill: #fff; pointer-events: none; }
.fb07-sqfab--glass svg { fill: #1d1d1f; }
/* gloss highlight on larger buttons */
.fb07-sqfab--xl::after, .fb07-sqfab--lg::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 46%;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
pointer-events: none;
}
/* ── layout ── */
.fb07-scene {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
width: min(860px, 100%);
}
.fb07-panel {
background: #fff;
border-radius: 22px;
padding: 36px;
display: flex;
flex-direction: column;
gap: 24px;
box-shadow: 0 2px 20px rgba(0,0,0,.07);
}
.fb07-panel-title {
font-size: .72rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #aeaeb2;
}
.fb07-icon-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
justify-items: center;
}
.fb07-btn-row {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
/* iOS-style home screen simulation */
.fb07-ios-screen {
background: linear-gradient(145deg, #1a3a8f, #6b21a8);
border-radius: 22px;
padding: 28px 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
justify-items: center;
}
.fb07-app-icon-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
}
.fb07-app-name {
font-size: .65rem;
color: rgba(255,255,255,.85);
text-align: center;
line-height: 1.2;
}
@media (max-width: 680px) {
.fb07-scene { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.fb07-sqfab { transition: none; }
}