Luna UI Documentation

html

<!-- Apply Style -->
<engine:Button class="btn" />
<!-- With Size -->
<engine:Button class="btn btn-lg" />
<!-- With Color -->
<engine:Button class="btn red" />
<!-- With Size and Color -->
<engine:Button class="btn btn-xl violet" />
<!-- GHOST -->
<engine:Button class="btn btn-xl violet ghost" />
<!-- MASKED -->
<engine:Button class="btn btn-xl violet masked" />
<!-- SHADE -->
<engine:Button class="btn btn-xl violet shade" />
<!-- OUTLINE -->
<engine:Button class="btn btn-xl violet outline" />

Size

Class	Description
btn-sm	Small
btn-lg	Large
btn-xl	xLarge

Color

To change the color of a button, add the color name as a class without a value.

html

<engine:Button class="btn teal" />

Refer to colors to learn about available options.

Special

Class	Description
ghost	A class which gives the button a transparent background. Upon hover and focus states, the background changes to a semi-transparent black color and the text color changes to be whichever color class the button was given.
masked	A class which gives the button a transparent background. Upon hover and focus states, the background changes to whichever color class the button was given and text color remains the same.
shade	Similar to ghost, but with a semi-transparent black background that is always visible, not just on hover. The text color does not change on hover. Combine with ghost to also change text color on hover.
outline	A class which gives the button a border in the color of the button's color class. The text color matches the border color.