val-do.com დიზაინ სისტემა

buttons

Variants and states

Hover/Focus ეფექტი ნახე რეალურად მაუსით გადატარებისას ან Tab ნავიგაციით.

<button type="button" class="btn">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-link">Link</button>
<a href="#" class="btn">Link Button</a>
<button type="button" class="btn" disabled>Disabled</button>

Link variants

Hover ეფექტი: underline — outline/box-shadow გარეშე. ფერი შეესაბამება შესაბამის solid variant-ს.

<button type="button" class="btn btn-link">btn-link</button>
<button type="button" class="btn btn-link-primary">btn-link-primary</button>
<button type="button" class="btn btn-link-danger">btn-link-danger</button>
<button type="button" class="btn btn-link-success">btn-link-success</button>

Sizes

`.btn-sm` კლასი მცირდება სიმაღლე, padding-ი და font-size-ი — გამოიყენე ცხრილებში, card-ებში ან მჭიდრო ადგილებში.

<button type="button" class="btn btn-sm">Default</button>
<button type="button" class="btn btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-sm btn-success">Success</button>
<button type="button" class="btn btn-sm btn-link">Link</button>
<a href="#" class="btn btn-sm">Link Button</a>
<button type="button" class="btn btn-sm" disabled>Disabled</button>