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-lg

<button type="button" class="btn btn-lg">Default</button>
<button type="button" class="btn btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-lg btn-success">Success</button>
<button type="button" class="btn btn-lg" disabled>Disabled</button>

btn-sm

`.btn-sm` — გამოიყენე ცხრილებში, card-ებში ან მჭიდრო ადგილებში. `.btn-lg` — გამოიყენე CTA ღილაკებად, full-width ღილაკებად.

<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>