Visual System

Buttons

Our button system uses a three-layer glass effect with gradient borders for a premium, modern feel. Buttons feature backdrop blur, diagonal gradient strokes, and integrated arrow circles.

Live Examples

Live button examples as they appear on the site.

Primary (Ocean Fill)

Secondary (Glass Fill)

Three-Layer Architecture

Every button follows a consistent three-layer structure that creates depth and premium visual appeal.

Layer Structure

Layer 1 — Gradient Border: A diagonal gradient stroke (white at corners, transparent in middle) created using CSS mask-composite. This creates the signature “glowing corners” effect.

Layer 2 — Mask: The mask-composite technique cuts out the interior, leaving only the gradient as a border effect.

Layer 3 — Fill: The interior fill — either glass (semi-transparent with backdrop blur) or solid gradient (ocean) depending on button variant.

Primary Button (Ocean Fill)

The primary button uses our ocean gradient fill with the three-layer border effect. Reserved for the most important action on a page.

CSS Structure

/* Base button */
background: var(--gradient-ocean);
border-radius: 999px;
padding: 5px 5px 5px 25px; /* Asymmetric for arrow circle */

/* Layer 1: Gradient border (::before) */
.button::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px; /* Border thickness */
  background: linear-gradient(-45deg,
    #FFF 0%,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,0) 75%,
    #FFF 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

Secondary Button (Glass Fill)

The secondary button uses a glass effect with backdrop blur and the same three-layer border structure. Use for secondary actions alongside primary buttons.

CSS Structure

/* Base button */
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(40px) saturate(200%);
-webkit-backdrop-filter: blur(40px) saturate(200%);
border-radius: 999px;
padding: 5px 25px 5px 5px; /* Asymmetric for arrow circle */

/* Same gradient border technique as primary */
.button::before {
  /* Identical mask-composite border */
}

Arrow Circles

Arrow circles are integrated into buttons and use the same three-layer effect. They contain a directional arrow icon that rotates on hover.

44px Circle with Glass Fill

Arrow Circle Structure

/* Arrow circle container */
.arrowCircle {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(30px) saturate(180%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Same gradient border as buttons */
.arrowCircle::before {
  background: linear-gradient(-45deg, #FFF 0%, ...);
  /* mask-composite border technique */
}

/* Hover: rotate arrow */
.button:hover .arrowCircle svg {
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

Gradient Border Technique

The signature gradient border is achieved using the CSS mask-composite property, which creates a “cut-out” effect to show only the border.

Mask-Composite Border

/* The gradient */
background: linear-gradient(-45deg,
  #FFF 0%,                    /* Bottom-left corner: white */
  rgba(255,255,255,0) 25%,    /* Fade to transparent */
  rgba(255,255,255,0) 75%,    /* Stay transparent */
  #FFF 100%);                 /* Top-right corner: white */

/* The mask technique */
-webkit-mask:
  linear-gradient(#fff 0 0) content-box,  /* Inner mask */
  linear-gradient(#fff 0 0);               /* Outer mask */
-webkit-mask-composite: xor;  /* Safari */
mask-composite: exclude;       /* Standard */

/* padding controls border thickness */
padding: 1px;

Hover States

All buttons use a subtle lift effect on hover with enhanced shadows and arrow rotation. Hover over the examples above to see the effect.

Hover Transforms

/* Button lift */
transform: translateY(-2px);

/* Primary hover shadows */
box-shadow:
  inset 0 1px 1px rgba(255, 255, 255, 0.35),
  inset 0 -1px 1px rgba(0, 0, 0, 0.1),
  0 8px 25px rgba(46, 199, 230, 0.4);

/* Arrow rotation */
.arrowCircle svg {
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

Responsive Sizing

Buttons scale down on mobile with adjusted padding and arrow circle sizes.

Element	Desktop	Mobile (<735px)
Button padding	5px 25px 5px 5px	4px 20px 4px 4px
Arrow circle	44px × 44px	38px × 38px
Font size	18px	16px

Usage Rules

Use only one primary (ocean) button per section. Multiple primary buttons dilute visual hierarchy.
The three-layer structure (gradient border + mask + fill) must be consistent across all buttons.
Gradient border uses -45 degree angle with white at 0% and 100%, transparent at 25% and 75%.
Arrow circles are mandatory for hero CTAs. Smaller contextual buttons may omit them.
Glass buttons require backdrop-filter: blur(40px) for the frosted effect. Test browser support.
All buttons use border-radius: 999px for a fully rounded pill shape.
Arrow icons rotate -45 degrees on hover. Transition duration is 0.3s ease.
Button text uses DM Sans, font-weight: 500. Never use bold (700) or light (300).