Buttons

SkyLineCSS provides a set of utility classes to quickly style buttons. These classes can be used to create buttons of different sizes, colors, and styles.

Basic Button

To create a basic button, use the .btn class:

<button class="btn">Button</button>

Button Sizes

You can also specify the size of the button using the following classes:

  • .btn-sm: Small button

  • .btn-lg: Large button

Example:

<button class="btn btn-sm">Small Button</button>
<button class="btn btn-lg">Large Button</button>

Button Colors

SkyLineCSS provides predefined color classes for buttons:

  • .btn-primary: Primary color

  • .btn-secondary: Secondary color

  • .btn-success: Success color

  • .btn-danger: Danger color

  • .btn-warning: Warning color

Example:

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-warning">Warning Button</button>

Rounded Buttons

You can create rounded buttons using the .rounded class:

<button class="btn rounded">Rounded Button</button>

Full-Width Button

To create a full-width button, use the .btn-block class:

<button class="btn btn-block">Full-Width Button</button>

Disabled Button

To create a disabled button, add the disabled attribute and use the .btn-disabled class:

<button class="btn btn-disabled" disabled>Disabled Button</button>

Button with Icons

You can include icons inside buttons using classes like .btn-icon-left and .btn-icon-right:

<button class="btn btn-primary btn-icon-left">
  <i class="fas fa-home"></i> Home
</button>

<button class="btn btn-success btn-icon-right">
  Profile <i class="fas fa-user"></i>
</button>

Hover and Focus Styles

SkyLineCSS provides hover and focus styles for buttons:

  • .hover:bg-gray-200: Background color on hover

  • .hover:text-white: Text color on hover

  • .focus:outline-none: Remove outline on focus

  • .focus:ring-2: Add ring on focus

  • .focus:ring-purple-600: Ring color on focus

  • .focus:ring-offset-2: Ring offset on focus

Example:

<button class="btn btn-primary hover:bg-gray-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">
  Hover and Focus Button
</button>

Complete Example

Here's a complete example combining different button styles:

<button class="btn btn-primary btn-lg rounded-full">
  Primary Large Rounded Button
</button>

<button class="btn btn-success btn-icon-left hover:bg-green-500">
  <i class="fas fa-check"></i> Success Button
</button>

<button class="btn btn-danger btn-sm btn-block">
  Danger Small Full-Width Button
</button>

<button class="btn btn-warning btn-lg disabled">
  Disabled Warning Button
</button>

These are some of the available button styles in SkyLineCSS. Feel free to mix and match these classes to create various button designs for your projects.

PreviousAlertsNextCards

Last updated