A flexible Sass mixin for creating BEM-style buttons.
View on Github.c-button { @import "node_modules/buttono/buttono"; $buttono-font-family: Helvetica; @include buttono-block(); &--default { @include buttono-style-modifier(); } &--primary { @include buttono-style-modifier($background-color: lightblue); }}Great things about Button
- 01
Most of the time you will only need one color to create a button.
Just define a background color and you are good to go!
- 02
Even though Buttono is following the BEM methodology, you can still use it with all other conventions.
Buttono is non-restrictive.
- 03
The buttons you create with Buttono will look exactly the same in all modern browsers.
So you don’t have to worry about that!
- 04
Buttono deals with focus styles for accessibility.
Because accessibility matters!
- 05
Thanks to Buttono’s flexible structure you can configure it for any situation.
Buttono will be ready for every challenge!
Some Aweso me Examples
.c-button { @import 'node_modules/buttono/buttono'; $buttono-padding: 0.5rem 2rem; $buttono-color-alt: #030315; $buttono-border-radius: 0.25rem; $buttono-transition-duration: 0.2s; @include buttono-block($display: inline-flex); // Extra styles min-height: 3.5rem; align-items: center; font-weight: 500; &--primary { @include buttono-style-modifier( $background-color: #5a46ff, $background-color-hover: #4333db ); } &--success { @include buttono-style-modifier($background-color: #76d319); } &--danger { @include buttono-style-modifier($background-color: #fc3559); } &--warning { @include buttono-style-modifier($background-color: #fc840c); } &--info { @include buttono-style-modifier($background-color: #00cbf4); } &--light { @include buttono-style-modifier($background-color: #c4c5ca); } &--dark { @include buttono-style-modifier($background-color: #191922); }}.c-button { @import 'node_modules/buttono/buttono'; $buttono-padding: 0.5rem 2rem; $buttono-color-alt: #030315; $buttono-border-radius: 0.25rem; $buttono-transition-duration: 0.2s; @include buttono-block($display: inline-flex); // Extra styles min-height: 3.5rem; align-items: center; font-weight: 500; &--outline-primary { @include buttono-style-modifier( $color: #fff, $color-disabled: #999, $border-width: 0.125rem, $border-color: #5a46ff, $background-color: transparent, $background-color-hover: #5a46ff, $border-color-disabled: #9e90ff, $color-disabled: #9e90ff ); } &--outline-success { @include buttono-style-modifier( $color: #fff, $color-disabled: #999, $border-width: 0.125rem, $border-color: #76d319, $background-color: transparent, $background-color-hover: #76d319, $border-color-disabled: #bef171 ); } &--outline-danger { @include buttono-style-modifier( $color: #fff, $color-disabled: #999, $border-width: 0.125rem, $border-color: #fc3559, $background-color: transparent, $background-color-hover: #fc3559, $border-color-disabled: #feb6ae ); } &--outline-warning { @include buttono-style-modifier( $color: #fff, $color-disabled: #999, $border-width: 0.125rem, $border-color: #fc840c, $background-color: transparent, $background-color-hover: #fc840c, $border-color-disabled: #fedc9d ); } &--outline-info { @include buttono-style-modifier( $color: #fff, $color-disabled: #999, $border-width: 0.125rem, $border-color: #00cbf4, $background-color: transparent, $background-color-hover: #00cbf4, $border-color-disabled: #98fdf7 ); } &--outline-light { @include buttono-style-modifier( $color: #fff, $color-disabled: #999, $border-width: 0.125rem, $border-color: #c4c5ca, $background-color: transparent, $background-color-hover: #c4c5ca, $border-color-disabled: #efeff1, ); } &--outline-dark { @include buttono-style-modifier( $color: #fff, $color-disabled: #999, $border-width: 0.125rem, $border-color: #191922, $background-color: transparent, $background-color-hover: #191922, $border-color-disabled: #c4c5ca ); }}