Buttons

MetrePay buttons are clean, rounded, and purposeful. Each variant has a specific semantic role — use the right button for the right context.

---

Button Variants

Primary Purple Gradient Outline Ghost

Variant	Usage
Primary (Blue)	Single payment CTA, main action in blue-context pages
Purple	Recurrent/subscription CTA, main action in purple-context pages
Gradient	Hero section CTA, landing page primary action
Outline	Secondary action, cancel, back
Ghost	Tertiary action, filter, view details

---

Button Sizes

Small Default Large

Size	Height	Font Size	Usage
Small	32px	13px	Table actions, compact UI
Default	42px	15px	Standard forms and cards
Large	52px	17px	Hero CTAs, prominent actions

---

Full Width Button

Pay Now

Used in payment forms and checkout flows — always full-width on mobile.

---

CSS Implementation

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  height: 42px;
  border-radius: 8px;           /* --mp-radius-md */
  font-family: 'Cabin', sans-serif;
  font-size: 15px;              /* --mp-font-size-md */
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;   /* --mp-transition-base */
  text-decoration: none;
}

/* Primary (Blue) */
.btn--primary {
  background: #6E96FF;          /* --mp-color-blue */
  color: #FFFFFF;
}
.btn--primary:hover {
  background: #6687DC;          /* --mp-color-blue-hover */
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -4px rgba(10, 10, 10, 0.1);
}

/* Purple */
.btn--purple {
  background: #5C0390;          /* --mp-color-purple */
  color: #FFFFFF;
}
.btn--purple:hover {
  background: #3A005C;          /* --mp-color-purple-hover */
  transform: translateY(-1px);
}

/* Gradient */
.btn--gradient {
  background: linear-gradient(90deg, #6E96FF 0%, #84a7ff 75%, #adc5ff 100%);
  color: #FFFFFF;
}

/* Outline */
.btn--outline {
  background: transparent;
  color: #6E96FF;
  border: 2px solid #6E96FF;
}
.btn--outline:hover {
  background: #EBF0FF;
}

/* Ghost */
.btn--ghost {
  background: #EBF0FF;          /* --mp-color-blue-light */
  color: #6E96FF;
}
.btn--ghost:hover {
  background: #d4e0ff;
}

/* Sizes */
.btn--sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn--lg { height: 52px; padding: 0 28px; font-size: 17px; }
.btn--full { width: 100%; }

---

Bulma Implementation

<!-- Primary (Blue) -->
<button class="button is-primary" style="border-radius:8px; font-family:'Cabin',sans-serif; font-weight:600;">
  Pay Now
</button>

<!-- Purple -->
<button class="button" style="background:#5C0390; color:white; border-radius:8px; font-family:'Cabin',sans-serif; font-weight:600;">
  Subscribe
</button>

<!-- Outline -->
<button class="button is-primary is-outlined" style="border-radius:8px; font-family:'Cabin',sans-serif; font-weight:600;">
  View Details
</button>

<!-- Full width -->
<button class="button is-primary is-fullwidth" style="border-radius:8px; font-family:'Cabin',sans-serif; font-weight:600;">
  Continue
</button>

<!-- Small -->
<button class="button is-primary is-small" style="border-radius:8px; font-family:'Cabin',sans-serif;">
  Edit
</button>

---

Tailwind Implementation

<!-- Primary (Blue) -->
<button class="inline-flex items-center justify-center px-5 h-10 bg-mp-blue hover:bg-mp-blue-hover text-white rounded-md font-semibold text-md transition-base hover:-translate-y-px hover:shadow-hover">
  Pay Now
</button>

<!-- Purple -->
<button class="inline-flex items-center justify-center px-5 h-10 bg-mp-purple hover:bg-mp-purple-hover text-white rounded-md font-semibold text-md transition-base hover:-translate-y-px">
  Subscribe
</button>

<!-- Outline -->
<button class="inline-flex items-center justify-center px-5 h-10 bg-transparent text-mp-blue border-2 border-mp-blue rounded-md font-semibold text-md transition-base hover:bg-mp-blue-light">
  View Details
</button>

<!-- Ghost -->
<button class="inline-flex items-center justify-center px-5 h-10 bg-mp-blue-light text-mp-blue rounded-md font-semibold text-md transition-base hover:bg-blue-100">
  Learn More
</button>

<!-- Full width -->
<button class="w-full flex items-center justify-center h-10 bg-mp-blue hover:bg-mp-blue-hover text-white rounded-md font-semibold text-md transition-base">
  Continue
</button>

---

Loading State

<!-- CSS -->
<button class="btn btn--primary" disabled style="opacity:0.7; cursor:not-allowed;">
  <span style="display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,0.4); border-top-color:white; border-radius:50%; animation:spin 0.8s linear infinite; margin-right:8px;"></span>
  Processing...
</button>

---

Rules

Button rules

• Use Primary (Blue) for single payment flows
• Use Purple for recurrent/subscription flows
• Use Gradient only in hero sections — never in forms
• Use Outline for secondary actions (cancel, back, view)
• Use Ghost for tertiary actions (filter, sort, details)
• Always use font-weight: 600 on buttons
• Always use border-radius: 8px — never sharp corners
• Full-width buttons in payment forms on mobile
• Never use more than 2 button variants in the same view
• The primary CTA should always be the most visually prominent element