Baselayer 3: Buttons

Baselayer form elements have simple background, hover state and focus styling.

Link “button” 
<button type="button" name="button">Button</button>

<input type="button" name="input" value="Input Button">

<input type="submit" name="submit" value="Submit Button">

<input type="reset" name="reset" value="Reset Button">

<!-- Styling a link as a button -->
<a class="btn" href="">Link “button”</a>

Notes:

  1. Form elements and buttons (including the btn class) have font-size: inherit. This means their font sizes can be modified by any font-size limit around the button in Baselayer.
  2. The font-family of form elements and buttons is controlled by var(--base-ff) (default is sans-serif).
  3. Buttons and form elements have the same min-width, min-height and padding, so that they can be used in combination. All these are sent to 0.5em, so that it will also respond to the font-size of the form element or button.
  4. Buttons have built-in display: inline-flex and centering and middling flexbox alignment.
  5. Buttons have a built-in hover background-color change: the background color becomes darker for the light theme, and lighter for the dark theme. You don’t need to set the hover state of buttons.

Full-width buttons

If you want a button to stretch full-width there are multiple options:

  1. Add class="w-100%" to the button
  2. Override the inline-flex by adding class="flex". (Do not use class="block" on a button because that will override its inline flexbox.)
  3. Include the button as a flex-item or grid-item, so that the flex or grid wrapper takes care of the button width.

<button class="w-100%" type="button" name="button">
  Button
</button>

Also, since buttons already have display: inlne-flex, this means that adding the flex-space-between class to the button will also stretch the button if you have more than one item inside the button, such as the descriptive text plus an icon.

For example, here’s a full-width button with a down-caret icon and spacing controlled by flexbox:

<button class="flex-space-between" type="button" name="button">
  Button
  <!-- Icon -->
  <svg>...</svg>
</button>

Down-caret SVG icon from Phosphor Icons, with color set by currentColor, and width and height 16px — same as font size (1rem).

Another way to control the width of a button is from outside of it — by wrapping the button in a grid so that the button adopts the dimensions of a grid item.

Adding colors to buttons

Border, background, and text color utilities can be used.

Link “button”

Buttons have a built-in hover color-change: the background color becomes darker for the light theme, and lighter for the dark theme.

<!-- Default button -->
<button type="button" name="button">Button</button>

<!-- Blue button -->
<button class="bg-blue" type="button" name="button">Button</button>

<!-- Amber buttons -->
<button class="bg-amber" type="button" name="button">Button</button>
<button class="t-black bg-amber bg-200 dark:bg-300" type="button" name="button">Button</button>

<!-- Green outline (a.k.a. ghost) link “button” -->
<a class="btn b-thin b-green bg-transparent t-green hover:t-reversi-flip hover:bg-green" href="#/">Link “button”</a>

Buttons with icons

In Baselayer, buttons have built-in display: inline-flex and centering and middling flexbox alignment. So, all you need to do is add an icon (ASCII character, SVG or small image), and it will all line up.

Buttons have built-in equal min-width and min-height. So, if you only have an icon or single ASCII character, and if your icon width is equal or smaller than its height and your icon is square, then you get a square button. (w-auto can be used to override the min-width.)

Baselayer CSS buttons works well with SVG icons, e.g. Phosphor icons. Set the width and height of the icon to be 24px for default (medium) sized buttons. Also, you probably want to set the fill colors to be currentColor so that it can be controlled by the CSS.

If you are combining text with an icon, you may sometimes need to add some space using gap-tiny within your button (see flex layouts). That’s the easiest way. Alternatively, you could put &nbsp; between your button text and icon.

Pill buttons

rounded-pill roundes the right and left ends of a button. Adding rounded-pill to a square button will make it circular. (See decoration: rounded corners.)

 

If you have some text in a button with rounded-pill (i.e. not a single character or icon), the rounded ends will be too close to the text (as in the example above). So, add some inline paddingusing one of the px-* utilities, depending on how much you need.

Button with rounded-pill px-2:

Button sizes

Buttons (including the btn utility) and form inputs will resize according to the font-size of the block that they are inside.

In baselayer, button min-width, min-height, and padding are all set in ems, so that they scale according to the text size.

You can also use the typographic size classes t-sm and t-lg on the buttons or inputs to modify buttons directly. You will still need to use these if the internal character is replaced by an SVG icon. You will also want to change the width="" and the height="" directly.

Link “button” Link “button” Link “button” 
<form class="flex flex-middle gap-1">
  <button type="button" name="button" class="t-sm">Button</button>
  <button type="button" name="button">Button</button>
  <button type="button" name="button" class="t-lg">Button</button>

  <a href="#" class="btn t-sm">Link “button”</a>
  <a href="#" class="btn">Link “button”</a>
  <a href="#" class="btn t-lg">Link “button”</a>
</form>