`Button` Component

Button as the name implies, is the rectagular knob meant for users to pressed onto. Button is commonly used in forms and link styling. Bissetii uses the standard W3C HTML <button> tag and is able to style it seemlessly. Additionally, Bissetii also supplies class tag in case of applying same styling to link.

This component is available starting from v1.11.0.

Sass Styling Parts

The Sass styling scripts responsible for styling button is located at:

assets/css/bissetii/modules/core/_Button.scss

Currently, the Sass script offers 3 types of styling:

normal - light background to contrast heavy background.
pinpoint - heavy background to contrast heavy background.
clean - colored text with transparent background.

For colors, they are currently limited to theme-based colors.

Javascript Parts

This component does not depend on any javascript.

HTML Parts

There are 2 general ways to create button in HTML. Both ways has their specific use cases and deployment.

By Button

Bissetii automatically styles <button> tags as long as they complies to the following HTML code. As per W3C convention, <button> tags should only appears in <form> only. The code for generating the buttons above are as follows (disabled buttons are shown in the latter):

<button type="button">
	Normal Button - Super Long Label
</button>
<button class="pinpoint" type="button">
	Pinpointed Button - Super Long Label
</button>
<button class="clean" type="button">
	Clean Button - Super Long Label
</button>


<button type="button" disabled>
	Normal Button - Super Long Label
</button>
<button class="pinpoint" type="button" disabled>
	Pinpointed Button - Super Long Label
</button>
<button class="clean" type="button" disabled>
	Clean Button - Super Long Label
</button>

This will render as:

By Class Styling

For outside <form> usage, Bissetii supplies .button class tag for button styling. To do that, simply include .button class tag and its associated button styles into your element. Here are some examples:

<a class="button" href="#">Normal Button - My Link Here</a>
<a class="button pinpoint" href="#">Pintpointed Button - My Link Here</a>
<a class="button clean" href="#">Clean Button - My Link Here</a>