Odnoklassniki

Styles and examples for .is-odnoklassniki

Button Variants

Available modifiers: default, .is-outlined, .is-light, .is-dark, .is-inverted

OdnoklassnikiOutlinedLightDarkInverted
<a class="button is-odnoklassniki">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Odnoklassniki</span>
</a>
<a class="button is-odnoklassniki is-outlined">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Outlined</span>
</a>
<a class="button is-odnoklassniki is-light">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Light</span>
</a>
<a class="button is-odnoklassniki is-dark">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Dark</span>
</a>
<a class="button is-odnoklassniki is-inverted">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Inverted</span>
</a>

Icon Buttons

Buttons without text, icon-only


<a class="button is-odnoklassniki">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki fa-lg"></i>
  </span>
</a>

Button Sizes

Available sizes: .is-small, normal, .is-medium, .is-large

SmallNormalMediumLarge
<a class="button is-odnoklassniki is-small">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Small</span>
</a>
<a class="button is-odnoklassniki">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Normal</span>
</a>
<a class="button is-odnoklassniki is-medium">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Medium</span>
</a>
<a class="button is-odnoklassniki is-large">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Large</span>
</a>

Button States

Available states: .is-hovered, .is-focused, .is-active, .is-loading, disabled

HoveredFocusedActiveLoadingDisabled
<a class="button is-odnoklassniki is-hovered">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Hovered</span>
</a>
<a class="button is-odnoklassniki is-focused">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Focused</span>
</a>
<a class="button is-odnoklassniki is-active">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Active</span>
</a>
<a class="button is-odnoklassniki is-loading">
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Loading</span>
</a>
<a class="button is-odnoklassniki" disabled>
  <span class="icon">
    <i class="fa-brands fa-odnoklassniki"></i>
  </span>
  <span>Disabled</span>
</a>

Text Colors

Helper classes for text color

.has-text-odnoklassniki

.has-text-odnoklassniki-light

.has-text-odnoklassniki-dark

<p class="has-text-odnoklassniki">Text with Odnoklassniki color</p>
<p class="has-text-odnoklassniki-light">Text with Odnoklassniki light color</p>
<p class="has-text-odnoklassniki-dark">Text with Odnoklassniki dark color</p>

Background Colors

Helper classes for background color

.has-background-odnoklassniki
.has-background-odnoklassniki-light
.has-background-odnoklassniki-dark
<div class="has-background-odnoklassniki has-text-white">
  .has-background-odnoklassniki
</div>
<div class="has-background-odnoklassniki-light">
  .has-background-odnoklassniki-light
</div>
<div class="has-background-odnoklassniki-dark has-text-white">
  .has-background-odnoklassniki-dark
</div>
Back to Providers

Developed with by Aldi Duzha

The source code is licensed under MIT.

Available in and

View Changelog