DS in CSS

Buttons

You can style a button like a Casebook button with the class .cb-button. By default this will be styled like the standard button variant.

Make any button text-only by adding the class .cb-text-only

<button onclick="alert('Standard button');" class="cb-button">Standard button</button>
<button onclick="alert('Standard text-only button');" class="cb-button cb-text-only">Standard text-only button</button>
<button onclick="alert('Standard button');" class="cb-button" disabled>Standard button, disabled</button>
<button onclick="alert('Standard text-only button');" class="cb-button cb-text-only" disabled>Standard button, disabled, text-only</button>
<button onclick="alert('Standard button, compact');" class="cb-button cb-compact">Standard button, compact</button>
<button onclick="alert('Standard compact text-only button');" class="cb-button cb-text-only cb-compact">Standard compact text-only button</button>
<button onclick="alert('Standard button, compact');" class="cb-button cb-compact" disabled>Standard button, disabled, compact</button>
<button onclick="alert('Standard compact text-only button');" class="cb-button cb-text-only cb-compact" disabled>Standard compact text-only button, disabled</button>

Full width buttons

Make any button full-width by adding the class .cb-full-width

<button onclick="alert('Standard button, full width')" class="cb-button cb-full-width">Standard button, full width</button>
<button onclick="alert('Standard button, full width')" class="cb-button cb-full-width" disabled>Standard button, full width, disabled</button>
<button onclick="alert('Standard button, compact, full width')" class="cb-button cb-full-width cb-compact">Standard button, compact, full width</button>
<button onclick="alert('Standard button, compact, full width')" class="cb-button cb-full-width cb-compact" disabled>Standard button, compact, full width, disabled</button>

Variants

Primary

Make a button primary by adding the class .cb-primary

<button onclick="alert('Primary button')" class="cb-button cb-primary">Primary button</button>
<button onclick="alert('Primary text-only button')" class="cb-button cb-primary cb-text-only">Primary text-only button</button>

Workflow

Make a button workflow by adding the class .cb-workflow

<button onclick="alert('Workflow (secondary) button');" class="cb-button cb-workflow">Workflow (secondary) button</button>
<button onclick="alert('Workflow (secondary) text-only button');" class="cb-button cb-workflow cb-text-only">Workflow (secondary) text-only button</button>

Destructive

Make a button destructive by adding the class .cb-destructive

<button onclick="alert('Destructive button');" class="cb-button cb-destructive">Destructive button</button>
<button onclick="alert('Destructive text-only button');" class="cb-button cb-destructive cb-text-only">Destructive text-only button</button>

Links styled as buttons

in the examples above, an HTML <button> element was used, but the class .cb-button can also be applied to other elements. Here's an HTML <a> element styled like a Casebook button:

Link styled like a button

<a class="cb-button cb-primary" href="#links">
  Link styled like a button
</a>