Our buttons have a playful, tactile feel with a 3D depth effect that makes them feel pressable. Use uppercase text with letter spacing for clarity.
Use primary buttons for the main action on a page. The Tide color with a darker bottom border creates a satisfying "pushable" appearance.
className="px-8 py-3 rounded-2xl bg-tide border-b-4 border-[#0369c1] text-white font-bold uppercase tracking-wide"Use secondary buttons for alternative actions. The outline style with a thicker bottom border maintains the 3D effect while being visually lighter.
className="px-8 py-3 rounded-2xl bg-white border-2 border-border border-b-4 text-tide font-bold uppercase tracking-wide"Use accent buttons to draw extra attention, typically for promotional CTAs or celebratory moments.
className="px-8 py-3 rounded-2xl bg-sunshine border-b-4 border-[#d4a90e] text-abyss font-bold uppercase tracking-wide"Use ghost buttons on dark backgrounds. They maintain the pill shape but use a subtle border treatment.
className="px-8 py-3 rounded-2xl border-2 border-white/40 border-b-4 text-white font-bold uppercase tracking-wide"Use different sizes based on context. Small for dense UIs, large for hero CTAs.
Small
px-5 py-2 text-sm rounded-2xl border-b-[3px]Medium (default)
px-8 py-3 rounded-2xl border-b-4Large
px-10 py-4 text-lg rounded-2xl border-b-[5px]Use icon buttons for common actions. The circular shape maintains the playful feel while staying compact.
className="w-12 h-12 rounded-2xl bg-tide border-b-4 border-[#0369c1] text-white flex items-center justify-center"Pair icons with text to add visual cues. Icons should match the button's visual weight.
Use full-width buttons in mobile layouts, modals, and forms where the button should span the container.
Group related actions together. Maintain the 3D style but adjust spacing for visual harmony.
Inline Actions
Segmented Control
Selected: day
The 3D effect responds to interaction. On press, the bottom border disappears and the button shifts down, creating a satisfying tactile feedback.
Default
Hover
Pressed