Buttons

Button Variables

Button colors are controlled with global CSS variables, so you can update button colors across the whole website from one place.

Filled Buttons

Use the base .btn class with a filled button variant.

<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-light">Light</a>
<a href="#" class="btn btn-dark">Dark</a>
<a href="#" class="btn btn-white">White</a>

Outline Buttons

Outline buttons are useful when you need a lighter secondary action.

<a href="#" class="btn btn-primary-outline">Primary Outline</a>
<a href="#" class="btn btn-secondary-outline">Secondary Outline</a>
<a href="#" class="btn btn-light-outline">Light Outline</a>
<a href="#" class="btn btn-dark-outline">Dark Outline</a>
<a href="#" class="btn btn-white-outline">White Outline</a>

Button Sizes

KitFront includes small, default, large, and full-width button sizes.

<a href="#" class="btn btn-primary btn-sm">Small</a>
<a href="#" class="btn btn-primary">Default</a>
<a href="#" class="btn btn-primary btn-lg">Large</a>
<a href="#" class="btn btn-primary btn-block">Block Button</a>

Link Buttons

Link buttons are useful when the action should feel lighter than a regular button.

<a href="#" class="btn btn-link">Learn More</a>
<a href="#" class="btn btn-link btn-link-arrow">Learn More</a>
<a href="#" class="btn btn-link btn-link-primary">Primary Link</a>
<a href="#" class="btn btn-link btn-link-secondary">Secondary Link</a>
<a href="#" class="btn btn-link btn-link-dark">Dark Link</a>
<a href="#" class="btn btn-link btn-link-white">White Link</a>

Using Your Own Button Colors

Replace the button color values inside assets/css/core.css with your own brand colors. Any button class using these variables will automatically follow your updated style.

:root {
  --kf-btn-primary-bg: #2563eb;
  --kf-btn-primary-bg-hover: #1d4ed8;

  --kf-btn-secondary-bg: #9333ea;
  --kf-btn-secondary-bg-hover: #7e22ce;
}