Buttons - Elements - Spectre.css CSS Framework
Author: Yan Zhu
Description: Buttons include simple button styles for actions in different types and sizes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Buttons#

Buttons include simple button styles for actions in different types and sizes.

Add the `btn` class to <a>, <input> or <button> elements for a default button. There are classes `btn-primary` and `btn-link` for predefined primary and link buttons.

    <button class="btn">default button</button>
    <button class="btn btn-primary">primary button</button>
    <button class="btn btn-link">link button</button>

#### Button colors#

Add the `btn-success` or `btn-error` class for success (green) or error (red) button color. If you need more button colors, please use button mixins to create your own button color variants.

    <button class="btn btn-success">success button</button>
    <button class="btn btn-error">error button</button>

#### Button sizes#

Add the `btn-sm` or `btn-lg` class for small or large button size. Also, you can add the `btn-block` class for a full-width button.

    <button class="btn btn-lg">large button</button>
    <button class="btn btn-sm">small button</button>

    <button class="btn btn-block">block button</button>

    <button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
    <button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
    <button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>

Please note that you could use the `btn-action` class for a square button, or add another `s-circle` class for a round button, which is often used as a Float Action Button (FAB).

    <button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
    <button class="btn btn-action s-circle"><i class="icon icon-arrow-left"></i></button>

#### Button states#

Add the `active` class for active button state style.

Add the `disabled` class or the `disabled` attribute for disabled button state style.

    <!-- buttons with disabled state -->
    <button class="btn disabled" tabindex="-1">disabled button</button>
    <button class="btn" disabled tabindex="-1">disabled button</button>

A button with the `loading` class can show loading indicator.

    <!-- buttons with loading state -->
    <button class="btn loading">button</button>
    <button class="btn btn-primary loading">primary button</button>

#### Button groups#

If you want to use buttons as a group, add the `btn-group` class to the container. You can add the `btn-group-block` class for a full-width button group.

    <div class="btn-group btn-group-block">
      <button class="btn">first button</button>
      <button class="btn">second button</button>
      <button class="btn">third button</button>
    </div>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.