Buttons

Buttons can be used to trigger user actions, such as submitting forms, opening modal dialogs, etc. Different types of buttons are available for different types of actions.

<!-- Most commonly used buttons -->
<button class="btn" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-link" type="button">Link</button>
<!-- Less commonly used, but still available -->
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-secondary" type="button">Secondary</button>

Please note that contextual buttons can be styled using the following CSS selectors:

  • .btn.btn-* {...} for light mode.
  • .dark-mode .btn.btn-* {...} for dark mode.

This means that something like .btn-primary {...}/.dark-mode .btn-primary {...} is not enough. This is because of how button styles are structured in Halfmoon.

Button tags #

While the .btn classes are designed to work with the <button> element, they can also be used with elements such as <input> and <a> to create buttons.

Link
<button class="btn" type="button">Default</button>
<input class="btn btn-primary" type="submit" value="Submit">
<a href="#" class="btn btn-link" role="button">Link</a>

Buttons will also work with the <input> element with the type="button" and type="reset" attributes.

Sizing #

Different sizes of buttons are also available:

  • Large buttons can be created by adding the .btn-lg class.
  • Small buttons can be created by adding the .btn-sm class.
  • Block level buttons can be created by adding the .btn-block class.
<!-- Large buttons -->
<button class="btn btn-lg" type="button">Default</button>
<button class="btn btn-primary btn-lg" type="button">Primary</button>
<!-- Small buttons -->
<button class="btn btn-sm" type="button">Default</button>
<button class="btn btn-primary btn-sm" type="button">Primary</button>
<!-- Block buttons -->
<div class="row">
  <div class="col-md-6">
    <button class="btn btn-block" type="button">Default</button>
    <button class="btn btn-primary btn-block" type="button">Primary</button>
  </div>
</div>

Disabled buttons #

Buttons can be disabled by adding the disabled="..." attribute to them. In order to just style the button to look disabled, the class .disabled can be added. However, it should be noted that this does not actually disable the button, it only styles it.

<!-- Disabled buttons -->
<button class="btn" type="button" disabled="disabled">Default</button>
<button class="btn btn-primary disabled" type="button">Primary</button> <!-- Not actually disabled, only styled to look the part -->

Active buttons #

Buttons with the class .active are styled with a focus effect around them.

<!-- Active buttons -->
<button class="btn active" type="button">Default</button>
<button class="btn btn-primary active" type="button">Primary</button>

Please note that the .active class is added automatically to buttons which are used as dropdown toggles. See the examples in the dropdown (opens in new tab) section.

Alternate in dark mode #

Default buttons with the class .alt-dm will have an alternate appearance in dark mode. Their appearance will be unchanged in light mode.

<!-- Alternate in dark mode (unchanged in light mode) -->
<button class="btn alt-dm" type="button">Alt. in dark mode</button>

These buttons are designed to look good and be usable on the colorful backgrounds in dark mode. For example, they can be used to great effect on contextual alerts in dark mode (opens in new tab).

Square buttons # Since v1.1.0+

Buttons with the class .btn-square will be square in shape. These buttons are generally great for creating action buttons with icons. You can also use the .btn-sm and .btn-lg classes for different sizes.

+
<!-- Square button -->
<button class="btn btn-square" type="button">&times;</button>

<!-- Link styled as circle primary button -->
<a href="#" class="btn btn-square btn-primary rounded-circle" role="button">&plus;</a> <!-- rounded-circle = border-radius: 50% -->

<!-- Small square button -->
<button class="btn btn-square btn-sm" type="button">1</button>

<!-- Normal square button -->
<button class="btn btn-square btn-primary" type="button">2</button>

<!-- Large square button -->
<button class="btn btn-square btn-lg" type="button">3</button>

Rounded buttons # Since v1.1.1+

By default, buttons have slightly rounded border-radius properties. The .btn-rounded class can be used to create buttons that are properly rounded in shape. You can also use the .btn-sm and .btn-lg classes for different sizes.

Primary
<!-- Rounded button -->
<button class="btn btn-rounded" type="button">Default</button>

<!-- Link styled as rounded primary button -->
<a href="#" class="btn btn-rounded btn-primary" role="button">Primary</a>

<!-- Small rounded button -->
<button class="btn btn-rounded btn-sm" type="button">Small</button>

<!-- Normal rounded button -->
<button class="btn btn-rounded" type="button">Default</button>

<!-- Large rounded button -->
<button class="btn btn-rounded btn-lg" type="button">Large</button>

Up next: Code