npm package: @getbase/buttons
Description: Base Buttons
Author: Matthew Hartman
Latest version: 4.1.0

# [Base Buttons](http://getbase.org)

Base buttons is designed in a way where you can add it on top of the Base CSS framework or to your own custom project.

[![Travis Build Status][travis-img]][travis] [![David Dependencies Status][david-img]][david]

[travis-img]:   https://img.shields.io/travis/getbase/buttons.svg?branch=master
[david-img]:    https://img.shields.io/david/dev/getbase/buttons.svg?branch=master&label=dependencies
[travis]:       https://travis-ci.org/getbase/buttons
[david]:        https://david-dm.org/getbase/buttons?type=dev

* * *

## Table of contents

* [Overview](#overview)
* [Installation](#installation)
* [Documentation](#documentation)
* [Demo](#demo)
* [Support](#support)
* [Authors](#authors)
* [License](#license)

* * *

## Overview

Base buttons is a very thin layer which includes styles for decorating buttons and links.

* * *

## Installation

If you have an existing project and would like to include the Base buttons module, run the following command:

```bash
npm install --save @getbase/buttons
```

Once you have the buttons module installed, you can include it in your CSS/LESS/SCSS file with one of the following ways:

#### CSS Import:
  ```css
  @import url("https://unpkg.com/@getbase/buttons/index.css");
  ```

#### SCSS Import:

  ```scss
  /* Import Base Buttons */
  @import "~@getbase/buttons/scss/index";
  /* Your Other Styles */
  @import "main"
  ```


#### LESS Import:

  ```less
  /* Import Base Buttons */
  @import "~@getbase/buttons/less/index";
  /* Your Other Styles */
  @import "main"
  ```

* * *

## Documentation

Base Buttons includes styles for decorating buttons and links.

#### Buttons (Applies to SCSS/LESS)

| Class | Purpose | Example | Outcome |
| ------------ | ------- | ------- | ------- |
| `.button` | Apply a `.button` | `<button class="button">This is a button</button>` | Applies a `.button` to a `button` element |
| `.button-link` | Apply a `.button-link` | `<button class="button-link">This is a button that is styled like a link</button>` | Applies a `.button-link` to a `button` element which styles it to look like a regular link |

### SCSS

#### Variables

| Variable | Purpose | Default | 
| -------- | ------- | ------- |
| `$base-button-border-color` | Border color applied to a `.button` | `#e1e1e1` |
| `$base-button-color` | Color applied to a `.button` | `#000` |
| `$base-button-background-color` | Background color applied to a `.button` | `#f9f9f9` |
| `$base-button-color-hover` | Color applied to a `.button` when hovered | `#000` |
| `$base-button-background-color-hover` | Background color applied to a `.button` when hovered | `#eee` |
| `$base-button-color-active` | Color applied to a `.button` when active | `#000` |
| `$base-button-background-color-active` | Background color applied to a `.button` when active | `#ccc` |

### LESS

#### Variables

| Variable | Purpose | Default | 
| -------- | ------- | ------- |
| `@base-button-border-color` | Border color applied to a `.button` | `#e1e1e1` |
| `@base-button-color` | Color applied to a `.button` | `#000` |
| `@base-button-background-color` | Background color applied to a `.button` | `#f9f9f9` |
| `@base-button-color-hover` | Color applied to a `.button` when hovered | `#000` |
| `@base-button-background-color-hover` | Background color applied to a `.button` when hovered | `#eee` |
| `@base-button-color-active` | Color applied to a `.button` when active | `#000` |
| `@base-button-background-color-active` | Background color applied to a `.button` when active | `#ccc` |



* * *

## Demo

[View page example](https://unpkg.com/@getbase/buttons/index.html) with the buttons stylesheet applied.

* * *

## Support

* IE10+ and all other modern browsers.
* Please specify browsers you need to support in `package.json` according to [browserslist docs](https://github.com/ai/browserslist#queries).

* * *

## Authors

#### Matthew Hartman

* [https://twitter.com/matthewhartmans](https://twitter.com/matthewhartmans)
* [https://github.com/matthewhartman](https://github.com/matthewhartman)

* * *

## License

Code released under the [MIT Open Source](https://opensource.org/licenses/MIT) license.