Menu icon Foundation
Styling buttons

Hi,

what is the way for styling buttons?

If I follow this example it gives me this error:

Compass was unable to compile one or more files in the project: error style.scss (Line 33 of _settings.scss: Undefined mixin 'button'.) overwrite style.css

How can I do this?

// Using the available options
.custom-button-class {
  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
}

// $padding - Used to build padding for buttons Default: $button-med or rem-calc(12)
$padding: 12px;
// Primary color set in settings file. Default: $primary-color.
$bg: orange;
// If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
$radius: true;
// We can set $full-width:true to remove side padding extend width. Default:false
$full-width: false;
// We can set $disabled:true to create a disabled transparent button. Default:false
$disabled: false;
// $is-input - <input>'s and <button>'s take on strange padding. We added this to help fix that. Default:false
$is-input: false;
            

         

buttonsstylingscss

Hi,

what is the way for styling buttons?

If I follow this example it gives me this error:

Compass was unable to compile one or more files in the project: error style.scss (Line 33 of _settings.scss: Undefined mixin 'button'.) overwrite style.css

How can I do this?

// Using the available options
.custom-button-class {
  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
}

// $padding - Used to build padding for buttons Default: $button-med or rem-calc(12)
$padding: 12px;
// Primary color set in settings file. Default: $primary-color.
$bg: orange;
// If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
$radius: true;
// We can set $full-width:true to remove side padding extend width. Default:false
$full-width: false;
// We can set $disabled:true to create a disabled transparent button. Default:false
$disabled: false;
// $is-input - <input>'s and <button>'s take on strange padding. We added this to help fix that. Default:false
$is-input: false;
            

         
Rafi Benkual almost 6 years ago

Hi Daniele,

Are you making changes in the _settings.scss partial?

About line 342 is where you will find button settings.

// Button Variables
//

// We use these to build padding for buttons.

// $button-med: emCalc(12);
// $button-tny: emCalc(7);
// $button-sml: emCalc(9);
// $button-lrg: emCalc(16);

// We use this to control the display property.

// $button-display: inline-block;
// $button-margin-bottom: emCalc(20);

// We use these to control button text styles.

// $button-font-family: inherit;
// $button-font-color: #fff;
// $button-font-color-alt: #333;
// $button-font-med: emCalc(16);
// $button-font-tny: emCalc(11);
// $button-font-sml: emCalc(13);
// $button-font-lrg: emCalc(20);
// $button-font-weight: bold;
// $button-font-align: center;

// We use these to control various hover effects.

// $button-function-factor: 10%;

// We use these to control button border styles.

// $button-border-width: 1px;
// $button-border-style: solid;

// We use this to set the default radius used throughout the core.

// $button-radius: $global-radius;
// $button-round: $global-rounded;

// We use this to set default opacity for disabled buttons.

// $button-disabled-opacity: 0.6;

Washington Guerrero almost 6 years ago

Try this way:

.custom-button {
@include button(
$padding: emCalc(12),
$bg: orange,
$radius: true,
$full-width: false,
$is-input: false
);
}