Buttons

Use the button class .css-button on an <a>, <button>, or <input> element.

If you want larger or smaller buttons - Skeleton-FX has 5 size modifiers? Add classes .xlarge, .large, .small or .xsmall for additional sizes. Example:

XLarge Button

Large Button

Normal Button

Small Button

XSmall Button

Buttons color modifiers supplied with 5 predefined colors. Add classes .primary, .success, .danger, .warning or .disabled for additional colors. Example:

Primary

Success

Danger

Warning

Disabled

Buttons with icon image. If to your project are connected FontAwesome source, you can use its symbols with element <i>. Just insert code <i class="icon fa-symbol-name"></i> inside button element. Example:

Button with envelope

Button with warning

Button with success

Code:

<a class="css-button" href="#"><i class="icon fa-envelope-o"></i> Button with envelope</a>
<a class="css-button warning" href="#"><i class="icon fa-exclamation-triangle"></i> Button with warning</a>
<a class="css-button success" href="#"><i class="icon fa-thumbs-o-up"></i> Button with success</a>

This page has been viewed: 987 time(s)