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.
Change the background colour by passing in the hex or color name variable of your choice.
For rounded edges you can pass in 'rounded' which will automatically add a border radius which is set to the @settings[radius] value.
1#button.flat(rounded, @plum);
For round buttons pass in 'round' as the first parameter
1#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.
1#button.custom(rgb(78, 11, 69), #fff, 14px, 1.1rem, 6px);
To style a link as a button use the following line:
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 */
1#button.link(@orange, @white, 1rem, 18px, @settings[radius]);