stylep-button
A simple button style pattern for your next project.
Install
You can install using the spm command or install using npm and the project title.
spm install button
Usage
/* button.css */;
Patterns
Placeholder selectors that contain common styles for structure and basic behavior of your buttons.
button-inline
This draws a button that displays inline on the page.
Options
$button-padding: 15px
Space inside the button$button-margin: 0 2% 2% 0
Space around the button
button-block
This draws a button that expands the width of the containing element.
Options
$button-padding: 15px
Space inside the button$button-margin: 0 2% 2% 0
Space around the button
button-group-inline
This draws containing buttons inline on the page.
Options
$button-group-padding: 0
Space inside the group$button-group-margin: 0 0 2%
Space around the group
button-group-block
This draws containing buttons expanded to the width of the containing element.
Options
$button-group-padding: 0
Space inside the group$button-group-margin: 0 0 2%
Space around the group
Styles
Customizable presets that give your button a specific style-set.
button-solid
Paints your button as a solid object with colors and radius. For added performance the hover state uses the ::after
pseudo-class to render a shadow with only an opacity
transition.
Options
$button-color: #333
$button-hover-color: #555
$button-text-color: #fff
$button-hover-shadow: none
$button-radius: 4px
$button-duration: .3s
$button-disabled-opacity: .35
button-hollow
Same as it’s solid counterpart, but it is drawn with a border instead.
Options
$button-color: #555
$button-hover-text-color: #fff
$button-hover-shadow: none
$button-radius: 4px
$button-duration: .3s
$button-disabled-opacity: .35
button-group-pill
Combined with another group pattern, you can round off only the first and last button.
License
This project is licensed under the MIT license.