Button

Button

SysaCSS provides the following classes for buttons,

Variable Value
ss-btn A rectangular button with a shadow hover effect
ss-button A rectangular button with a grey hover effect
ss-bar A horizontal bar that can be used to group buttons together
ss-block Class that can be used to define a full width (100%) button
ss-circle Can be used to define a circular button
ss-ripple Can be used to create a ripple effect
<button class="ss-button">
  BUTTON
</button>
<button class="ss-btn">
  BTN
</button>

Outlined Button

<button class="ss-btn outline">
  BTN
</button>

Button Color

All the ss-color, ss-bg-color and ss-bd-color classes can be used to color buttons.

ss-color to color button text.

<button class="ss-btn ss-sand">
  Sand Text
</button>
<button class="ss-btn ss-hvr-sand">
  Sand Text
</button>

ss-bg-color to color background.

<button class="ss-btn ss-bg-sand">
  Sand Background
</button>
<button class="ss-btn ss-hvr-bg-sand">
  Sand Background
</button>

ss-bd-color to color border.

<button class="ss-btn ss-bd-sand">
  Black Border
</button>
<button class="ss-btn ss-hvr-bd-sand">
  Black Border
</button>

Combining Colors

All the ss-color, ss-bg-color and ss-bd-color classes can be combined to make buttons appear as needed.

<button class="ss-btn ss-white ss-bg-black">BTN with White Text & Black Background</button>
<button class="ss-btn ss-white ss-bg-green">BTN with White Text & Green Background</button>
<button class="ss-button ss-white ss-bg-black">BUTTON with White Text & Black Background</button>
<button class="ss-button ss-white ss-bg-green">BUTTON with White Text & Green Background</button>