Buttons

Buttons

A suite of modern button styling options you can use to make user interaction even more engaging.

Button Styles

Skeletonic CSS v1.0.5 provides different styles of buttons:

Default buttons style

Default

Button states

Skeletonic CSS has the following classes for multiple buttons states. The button classes can be used on an <a>, <button>, or <input> element.

• .primary
• .secondary
• .active
• .success
• .info
• .warning
• .danger
• .link

Primary Secondary Active Disabled Success Info Error Warning Link button

<button type="button" class="primary">Primary</button> <button type="button" class="secondary">Secondary</button> <button type="button" disabled="">Disabled</button> <button type="button" class="success">Success</button> <button type="button" class="info">Info</button> <button type="button" class="error">Error</button> <button type="button" class="warning">Warning</button> <button type="button" class="link">Link button</button>

Outline Button states

Skeletonic CSS has the following classes for multiple outline buttons states. The button classes can be used on an <a>, <button>, or <input> element.

• .primary-outline
• .secondary-outline
• .success-outline
• .info-outline
• .warning-outline
• .danger-outline
• .link-outline

Primary Outline Secondary Outline Success Outline Error Outline Warning Outline

<button type="button" class="primary-outline">Primary Outline</button> <button type="button" class="secondary-outline">Secondary Outline</button> <button type="button" class="success-outline">Success Outline</button> <button type="button" class="error-outline">Error Outline</button> <button type="button" class="warning-outline">Warning Outline</button>

Button Groups

Skeletonic CSS allows you to group multiple buttons together on a single line. Use an element of your choice with class .button-group to create a button group:

Button 0 Button 1 Button 2

<p class="button-group"> <button class="active">Button 0</button> <button>Button 1</button> <button>Button 2</button> </p>