Button mixins

Mixins for simple button styles

Button mixins currently supported are:

flat
flat rounded
flat round
custom
link

By default the background colour is set to the @color[primary] setting Target the element you want to style and call the mixin. The padding and font-size values are fixed to 1rem. The hover background color slightly darkend for a subtle hover effect. The button text color is fixed to white.

#button.flat();

Change the background colour by passing in the hex or color name variable of your choice.

#button.flat(@sea-green);

For rounded edges you can pass in 'rounded' which will automatically add a border radius which is set to the @settings[radius] value.

#button.flat(rounded, @plum);

For round buttons pass in 'round' as the first parameter

#button.flat(round, @mexican-red);

The custom button mixins allow you to fully customize a button style in a single line of code. The following 5 paramaters are supported, and include the following default values.

1background-color: @color[primary]; 
2color: white; 
3font-size: 1rem; 
4padding: 1rem; 
5border-radius: 0;

The next example shows a custom button using settings variables. To further customize this button style, an additional border and box shadow was added.

1#button.custom(@color[pale], @color[primary], 20px, 1.1rem, @settings[radius]);
2border: 2px solid @color[primary];
3box-shadow: 1px 2px 1px @color[graymedium];

Here is an example of a custom button using random values.

#button.custom(rgb(78, 11, 69), #fff, 14px, 1.1rem, 6px);

To style a link as a button use the following line:

#button.link();
Link 1

To customize the link button style pass in the following parameters: (Default values are shown in comments)

1background-color /* primary color */
2color  /* white */
3padding /* .7rem 1rem */
4font-size /* 1rem */
5border-radius /* 0 */

#button.link(@orange, @white, 1rem, 18px, @settings[radius]);
Link 2