Petal features a complex button style generator inside the LESS code to make adding new color sets as simple as possible.

Basic Button

<button class="btn"></button>

To make a button, simply add the .btn class, presumably to a <button> or <a> element.

Button Style Options

<button class="btn hollow">Button</button>
<button class="btn compact">Button</button>

<button class="btn hollow whitetext">Button</button>

Add .hollow to your button to get an outline-only style. Add .compact for a smaller sized version with reduced padding.

.whitetext class is used when you want to force white-colored text—useful when used with 'hollow' style on dark backgrounds.

Disabled Button

<button class="btn disabled" disabled>Button</button>

Use the :disabled attribute or .disabled class to visually disable the button.

Button Colors

By default, Petal provides 3 button colors for easy use:

Just add the color names as classes along with the .btn class to change the button color. If you don't explicitly specify the button color, it will follow whatever color is set as your @primary-accent-color (default is blue).

Generating additional color buttons

If you have added your own custom colors to the palette, you easily generate button styles with those colors. Make sure you added your colors as variables in your project variables sheet:

// my custom colors
@purple: #c37dc4;
@orange: #f1a85b;

Then you want to generate buttons with these colors by adding to the list as defined in the @btn-colors variable. Separate color names with commas.

// buttons
@btn-colors: blue, green, purple, orange;

Now when you compile your stylesheet, you'll see that .btn.purple and .btn.orange classes are generated. Use the class on buttons as you would with other colored buttons.

<button class="btn orange"></button>

When generating colored button styles, Petal automatically calculates the button text color to be either white or black depending on the color of the button for legibility. If you want to manually override this settings, modify the @btn-text-color-contrast-threshold variable to change the results (default is 60%). Setting this to 0% will always make the button text color black.

Button groups

<div class="btn-group">
  <button class="btn">Button</button>
  <button class="btn green">Button</button>
  <button class="btn red">Button</button>
</div>

Put the .btns inside a .btn-group and they will become inline blocks.

Segmented button groups Requires JavaScript

<div class="btn-group btn-group-segmented">
  <button class="btn hollow active" data-toggle="toggle" data-toggle-state="active">Button</button>
  <button class="btn hollow" data-toggle="toggle">Button</button>
  <button class="btn hollow disabled" data-toggle="toggle">Button</button>
</div>

Add .btn-group-segmented with .btn-group to remove the space inbetween buttons in a button group to make them visually look like segmented buttons. Petal doesn't provide preset functions for segmented buttons, however. You'll need to manually write your javascript code to make them actually work--or, use the radiobox method.

Use .disabled class on buttons to disable each buttons, or add .disabled on the btn-group to disable the whole group.

Toggle Buttons Requires JavaScript

<button class="btn" data-toggle="toggle">Toggle</button>

Add data-toggle="toggle" on the button to make it toggleable.

Button Dropdowns Requires JavaScript

<div class="btn-group">
  <button class="btn hollow dropdown" data-toggle="dropdown">Menu <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li class="divider"></li>
    <li class="submenu">
      <a href="#">Submenu 1</a>
      <ul class="dropdown-menu">
        <li><a href="#">Submenu item 1</a></li>
        <li><a href="#">Submenu item 2</a></li>
      </ul>
    </li>
    <li><a href="#">Menu item 3</a></li>
  </ul>
</div>

Attach a <ul> structured list menu with appropriate markups right after the .btn. The .dropdown class and data-toggle="dropdown" attributes are required to activate the toggle function.

The .btn-group class on parent element is required (0.9.0+) for the dropdown style to apply properly.

With default settings, the colors of the dropdown menu and the items will follow the color of the button. If you don't want this, set @btn-disable-colored-dropdown to false and you will always get plain white background colors.

Dropdown - Split button variant

<div class="btn-group btn-split">
  <button class="btn green">Button</button>
  <button class="btn green dropdown" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu" data-dropdown-align="right">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>
</div>

Put two .btns inside a .btn-group.btn-split wrapper element (.btn-split class required for 0.5.0+). For the smaller button on the right, insert the caret for the content; attach .dropdown class as well as the data-toggle="dropdown" attribute.

If you're using the .compact option, you need to apply them to both the actual button and the dropdown caret button.

Options

• data-dropdown-align="right" on ul.dropdown-menu : Align the menu to the right.
• @include-btn-dropdown : set to false if you're not going to use any button dropdowns in your project. Related code will not be included in compiled stylesheet.
• @include-btn-split : set to false if you're not going to use any split buttons in your project. (Split button requires the button dropdown styles, so if you have @include-btn-dropdown set to false, split buttons will not render properly regardless the value of @include-btn-split.)
• @btn-disable-colored-dropdown : set to false if you don't want colored dropdown menus. You'll get black-on-white menus regardless of the button color.

Buttons with spinners Requires JavaScript

<!-- Plain button -->
<button class="btn btn-spinner">Save</button>

<!-- With preexisting icon -->
<button class="btn btn-spinner icon-right has-icon">Save <i class="petalicon petalicon-save"></i></button>

Spinners inside buttons are useful when you want to indicate progress following the action called by the button. Just add .btn-spinner class on a .btn, then dynamically append .loading class with javascript to insert an animated spinner.

As the example above, after the progress is finished you can change the .loading class to .loading-done before removing class to indicate end of progress.

Options

• .has-icon : Use when button already has a Petalicon icon in it (only works for <i class="petalicon ~">)
• .icon-right : Display spinner on the right / when an icon already exists inside the button (after text)

Note: Hollow style icons are not supported. Compact size icons are supported. When generating custom-colored icons with lighter colors where text is not white, spinner may not appear.

Customizable LESS variables

// buttons
@include-btn-dropdown: true;
@include-btn-split: true;
@btn-disable-colored-dropdown: false;
@btn-border-width: 2px;
@btn-border-radius: 0;
@btn-font-size: 0.9em;
@btn-font-weight: 900;
@btn-letter-spacing: 2px;
@btn-line-height: 1.2;
@btn-dropdown-menu-item-font-size: 0.9em;
@gray-disabled-btn: false;
@btn-disable-transition: false;
@btn-disable-shadows: false;
@btn-spinner-animation-duration: 0.4s;
@btn-text-color-contrast-threshold: 60%;
@btn-colors: blue, green, red, black, gray, white;