Кнопки

На этой странице приведены примеры кнопок, которые можно использовать при разработке контентных страниц.

Стандартные кнопки (Solid)

<button class="btn btn-sm btn-theme">Theme</button>
<button class="btn btn-sm btn-success">Success</button>
<button class="btn btn-sm btn-danger">Danger</button>
<button class="btn btn-sm btn-warning">Warning</button>
<button class="btn btn-sm btn-white">White</button>
<button class="btn btn-sm btn-dark">Dark</button>
<button class="btn btn-sm btn-light">Light</button>
<button class="btn btn-sm btn-neutral">Neutral</button>

Контурные кнопки (Outline)

<button class="btn btn-sm btn-outline-theme">Theme</button>
<button class="btn btn-sm btn-outline-white">White</button>

Градиентные кнопки

<button class="btn btn-sm btn-gradient-theme">Theme</button>
<button class="btn btn-sm btn-gradient-success">Success</button>
<button class="btn btn-sm btn-gradient-danger">Danger</button>
<button class="btn btn-sm btn-gradient-warning">Warning</button>

Двухцветные градиенты

<button class="btn btn-sm btn-gradient-purple-blue">Purple → Blue</button>
<button class="btn btn-sm btn-gradient-cyan-blue">Cyan → Blue</button>
<button class="btn btn-sm btn-gradient-green-blue">Green → Blue</button>
<button class="btn btn-sm btn-gradient-purple-pink">Purple → Pink</button>
<button class="btn btn-sm btn-gradient-pink-orange">Pink → Orange</button>
<button class="btn btn-sm btn-gradient-teal-lime">Teal → Lime</button>

Размеры

<button class="btn btn-2xs btn-theme">2XS</button>
<button class="btn btn-xs btn-theme">XS</button>
<button class="btn btn-sm btn-theme">SM</button>
<button class="btn btn-md btn-theme">MD</button>
<button class="btn btn-base btn-theme">Base</button>
<button class="btn btn-lg btn-theme">LG</button>

Кнопки-ссылки

<button class="btn btn-link-theme">Link Theme</button>
<button class="btn btn-link-inverse">Link Inverse</button>
<button class="btn btn-link-neutral-inverse">Link Neutral</button>

Выключенные

<button class="btn btn-sm btn-theme" disabled>Theme</button>
<button class="btn btn-sm btn-outline-theme" disabled>Outline</button>
<button class="btn btn-sm btn-gradient-theme" disabled>Gradient</button>