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>
This will render as: