Buttons

vel-src: button.css

Styled button components with solid, outline, ghost, link, and glow variants across all semantic colors, plus size and state modifiers.

Class	Properties
vel-btn	Base button — padding, border-radius, font-weight, transitions
vel-btn-primary	Gradient primary background, white text
vel-btn-secondary	Secondary color background, white text
vel-btn-success	Success green background, white text
vel-btn-danger	Danger red background, white text
vel-btn-warning	Warning amber background, dark text
vel-btn-info	Info cyan/blue background, white text
vel-btn-outline-primary	Transparent background, primary border and text; fills on hover
vel-btn-outline-secondary	Transparent background, secondary border and text
vel-btn-outline-success	Transparent background, success border and text
vel-btn-outline-danger	Transparent background, danger border and text
vel-btn-ghost	No background or border; subtle hover fill
vel-btn-link	Appears as an inline link, no background
vel-btn-glow-primary	Adds primary color box-shadow glow on hover
vel-btn-xs	Extra-small size — smaller padding and font
vel-btn-sm	Small size
vel-btn-lg	Large size
vel-btn-xl	Extra-large size
vel-btn-block	width: 100%; display: block
vel-btn-icon	Square button sized for a single icon
vel-btn-loading	Shows a spinner, disables pointer events
vel-btn-disabled	Reduced opacity, cursor: not-allowed

Examples

Solid variants

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;gap:10px;flex-wrap:wrap;">
  <button class="vel-btn vel-btn-primary">Primary</button>
  <button class="vel-btn vel-btn-secondary">Secondary</button>
  <button class="vel-btn vel-btn-success">Success</button>
  <button class="vel-btn vel-btn-danger">Danger</button>
  <button class="vel-btn vel-btn-warning">Warning</button>
  <button class="vel-btn vel-btn-info">Info</button>
</div>

Outline & Ghost

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;gap:10px;flex-wrap:wrap;">
  <button class="vel-btn vel-btn-outline-primary">Outline Primary</button>
  <button class="vel-btn vel-btn-outline-danger">Outline Danger</button>
  <button class="vel-btn vel-btn-ghost">Ghost</button>
  <button class="vel-btn vel-btn-link">Link</button>
</div>

Sizes

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
  <button class="vel-btn vel-btn-primary vel-btn-xs">XS</button>
  <button class="vel-btn vel-btn-primary vel-btn-sm">SM</button>
  <button class="vel-btn vel-btn-primary">Default</button>
  <button class="vel-btn vel-btn-primary vel-btn-lg">LG</button>
  <button class="vel-btn vel-btn-primary vel-btn-xl">XL</button>
</div>

Glow

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <button class="vel-btn vel-btn-primary vel-btn-glow-primary">Glow on Hover</button>
</div>