Base Buttons
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.
Table of contents
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:
npm install --save @getbase/buttonsOnce you have the buttons module installed, you can include it in your CSS/LESS/SCSS file with one of the following ways:
CSS Import:
@import url("https://unpkg.com/@getbase/buttons/index.css");SCSS Import:
/* Import Base Buttons */
@import "~@getbase/buttons/scss/index";
/* Your Other Styles */
@import "main"LESS Import:
/* 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 with the buttons stylesheet applied.
Support
- IE10+ and all other modern browsers.
- Please specify browsers you need to support in
package.jsonaccording to browserslist docs.
Authors
Matthew Hartman
License
Code released under the MIT Open Source license.