Buttons

The .btn class enables you to apply button styles to <button> and other elements, such as input-buttons and hyperlinks.

Button – the Codebase basic (classless) button

– input button

Button – button with .btn class

– input button with .btn class

Hyperlink – hyperlink dressed as a button

<button>Button</button>

<input value="Input" type="submit">

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

<input class="btn" value="Input" type="submit">

<a class="btn" role="button" href="">Hyperlink</a>

Block Buttons

Buttons are normally inline elements. If you want a button to be a block element, simply add the .block layout utility class.

.btn.block:

Block button

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

Button UI colors

Classless Default Primary Secondary Success Warning Danger

<button>Classless</button>
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>

Button States

:disabled or .disabled / Normal / :hover / :active or .active

<button class="btn" disabled>Default disabled</button>
<button class="btn">Default</button>
<button class="btn active">Default active</button>

Classless disabled Default Default active

Default disabled Default Default active

Primary disabled Primary Primary active

Secondary disabled Secondary Secondary active

Success disabled Success Success active

Warning disabled Warning Warning active

Danger disabled Danger Danger active

Pill Buttons

Pill-shaped button

<button class="btn rounded-pill">Pill-shaped button</button>

Buttons with Text and Icons

Notes:

1. When you have more than one button in a row – e.g. you are creating a button group or tool bar – and you using icons and text in combination (or different text sizes in combination), buttons can become misaligned because the texts and icons have different baselines. You can solve this problem by wrapping horizontally arranged groups of buttons in .flex.flex-middle.
2. Depending on what icon font or SVG icon set you use, you may find it necessary to put the icon in its own tag within the button, and maybe also the accompanying text within its own tag within the button.

Buttons with Icons Only

.btn.btn-icon for square buttons (also use this for .btn.btn-icon.rounded-full below):

Since .btn-icon renders a square, you can also use .rounded-full to make it a circle (and not an oval).

.btn.btn-icon.rounded-full:

Button Sizes

<a href="" class="btn btn-sm">Small</a>
<a href="" class="btn">Default</a>
<a href="" class="btn btn-lg">Large</a>

.btn-icon at different sizes is set to maintain a square shape. This also means it maintains a circle shape if used in combination with .rounded-full (or even .rounded-pill):

A B C

<button class="btn btn-sm btn-icon rounded-full">A</button>
<button class="btn btn-icon rounded-full">B</button>
<button class="btn btn-lg btn-icon rounded-full">C</button>

Do you want larger text and/or icon on .btn-lg too? Then add the .t-lg text utility:

Normal text – large button

Large text – large button with large text

<a class="btn btn-primary btn-lg" href="">Normal text</a>
<a class="btn btn-primary btn-lg t-lg" href="">Large text</a>

Notes:

1. Buttons will always have bold text. (Using the text weight utilities, e.g. .t-thin won’t work on buttons.)
2. Using t-lg will work for icon fonts, but not for SVG icons. If you want your SVG icon to be larger then make it larger directly, or apply a CSS scale transform to it.

Examples using Tabler Icons at 24px and 36px size:

(24px equates to the default single line height in Codebase. 36px equates to the .t-lg size, that is 150% larger.)

Combining Buttons and (Other) Form Elements

A row of buttons would touch each other (buttons are ordinarily inline elements), unless you leave spaces between them. Leave no spaces if you want the buttons to touch each other, as in a “tool bar”. Or if you find it necessary, wrap them in a .flex.

You can remove some of the rounded corners using .unrounded utilities.

<button class="btn-icon unrounded-right">
  <!-- left-align icon -->
</button>
<button class="btn-icon unrounded">
  <!-- center icon -->
</button>
<button class="btn-icon unrounded-left">
  <!-- right-align icon -->
</button>

Go large — to grab people’s attention:

<form class="flex">
  <input id="email-example" class="form-element-lg rounded-pill unrounded-right t-lg" name="examplename" placeholder="Your email" type="email">
  <a class="btn btn-success btn-lg rounded-pill unrounded-left px-4 t-lg" href="">Subscribe</a>
</form>

Note: use .flex.flex-nowrap on inline form input/button combos.

Go small – to fit a form into a menubar, or into a table cell:

<form class="flex" action="">
  <input type="text" class="b-color-primary unrounded-right" id="site-search" name="site-search" autocomplete="off" aria-label="" placeholder="Search...">
  <button aria-label="Search" class="btn btn-primary btn-icon unrounded-left">
    <!-- search icon -->
  </button>
</form>

Outline buttons

Outline buttons (sometimes called “ghost buttons”) can be created using utility classes. Codebase utilities do not override the hover state, focus, etc.

Do this:

1. Put .bg-transparent to the button, in addition to e.g. .btn.btn-success.
2. Put a text color on the button (in this example, t-color-success).

(The border is taken care of already).

Example:

.btn.btn-success.bg-transparent.t-color-success:

Find out more

<a class="btn btn-success bg-transparent t-color-success" href="">Find out more →</a>

Note: .bg-transparent is an alias of .bg-color-transparent – the example above could have used either.