button.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DS in CSS - Button</title>
  <link rel="shortcut icon" href="https://cdn.casebook.net/images/favicon.ico">
  <link rel="stylesheet" type="text/css" href="./css/styles.css">
</head>

<body class="cb-baseline">
  <main class="cb-main">
    <h1 class="cb-h4 cb-bolder"><a class="cb-link" href="./index.html">DS in CSS</a></h1>
    <h2 class="cb-h5 cb-margin-bottom-large">
      Buttons
    </h2>
    <p>You can style a button like a Casebook button with the class <code
        class="cb-inline-code">.cb-button</code>. By default this will be styled like the standard button
      variant.</p>
    <p>Make any button text-only by adding the class <code class="cb-inline-code">.cb-text-only</code></p>
    <div class="cb-margin-default-vertical cb-flex cb-gap-default cb-flex-wrap-wrap">
      <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>
    </div>
    <div class="cb-margin-default-vertical cb-flex cb-gap-default cb-flex-wrap-wrap">
      <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>
    </div>
    <div class="cb-code-block-container">
      <pre
        class="cb-caption cb-monospace fullwidth cb-no-margin">&lt;button onclick="alert('Standard button');" class="cb-button"&gt;Standard button&lt;/button&gt;
&lt;button onclick="alert('Standard text-only button');" class="cb-button cb-text-only"&gt;Standard text-only button&lt;/button&gt;
&lt;button onclick="alert('Standard button');" class="cb-button" disabled&gt;Standard button, disabled&lt;/button&gt;
&lt;button onclick="alert('Standard text-only button');" class="cb-button cb-text-only" disabled&gt;Standard button, disabled, text-only&lt;/button&gt;
&lt;button onclick="alert('Standard button, compact');" class="cb-button cb-compact"&gt;Standard button, compact&lt;/button&gt;
&lt;button onclick="alert('Standard compact text-only button');" class="cb-button cb-text-only cb-compact"&gt;Standard compact text-only button&lt;/button&gt;
&lt;button onclick="alert('Standard button, compact');" class="cb-button cb-compact" disabled&gt;Standard button, disabled, compact&lt;/button&gt;
&lt;button onclick="alert('Standard compact text-only button');" class="cb-button cb-text-only cb-compact" disabled&gt;Standard compact text-only button, disabled&lt;/button&gt;</pre>
    </div>

    <h3 id="full-width" class="cb-h6 cb-margin-bottom-large cb-margin-top-large">Full width buttons</h3>

    <p>Make any button full-width by adding the class <code class="cb-inline-code">.cb-full-width</code></p>
    <div class="cb-margin-default-vertical cb-flex cb-flex-direction-column cb-gap-default">
      <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>
    </div>
    <div class="cb-code-block-container">
      <pre
        class="cb-caption cb-monospace fullwidth cb-no-margin">&lt;button onclick="alert('Standard button, full width')" class="cb-button cb-full-width"&gt;Standard button, full width&lt;/button&gt;
&lt;button onclick="alert('Standard button, full width')" class="cb-button cb-full-width" disabled&gt;Standard button, full width, disabled&lt;/button&gt;
&lt;button onclick="alert('Standard button, compact, full width')" class="cb-button cb-full-width cb-compact"&gt;Standard button, compact, full width&lt;/button&gt;
&lt;button onclick="alert('Standard button, compact, full width')" class="cb-button cb-full-width cb-compact" disabled&gt;Standard button, compact, full width, disabled&lt;/button&gt;</pre>
    </div>

    <div id="variants">
      <h3 class="cb-h6 cb-margin-bottom-large cb-margin-top-large">Variants</h3>

      <h4 id="primary" class="cb-callout cb-margin-bottom-large cb-margin-top-large">Primary</h4>

      <p>Make a button primary by adding the class <code class="cb-inline-code">.cb-primary</code></p>
      <div class="margin-default-vertical cb-flex cb-gap-default cb-flex-wrap-wrap">
        <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>
      </div>

      <div class="cb-code-block-container">
        <pre
          class="cb-caption cb-monospace fullwidth cb-no-margin">&lt;button onclick="alert('Primary button')" class="cb-button cb-primary"&gt;Primary button&lt;/button&gt;
&lt;button onclick="alert('Primary text-only button')" class="cb-button cb-primary cb-text-only"&gt;Primary text-only button&lt;/button&gt;</pre>
      </div>

      <h4 id="workflow-secondary" class="cb-callout cb-margin-bottom-large cb-margin-top-large">Workflow</h4>

      <p>Make a button workflow by adding the class <code class="cb-inline-code">.cb-workflow</code></p>
      <div class="cb-margin-default-vertical cb-flex cb-gap-default cb-flex-wrap-wrap">
        <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>
      </div>

      <div class="cb-code-block-container">
        <pre
          class="cb-caption cb-monospace fullwidth cb-no-margin">&lt;button onclick="alert('Workflow (secondary) button');" class="cb-button cb-workflow"&gt;Workflow (secondary) button&lt;/button&gt;
&lt;button onclick="alert('Workflow (secondary) text-only button');" class="cb-button cb-workflow cb-text-only"&gt;Workflow (secondary) text-only button&lt;/button&gt;</pre>
      </div>

      <h4 id="destructive" class="cb-callout cb-margin-bottom-large cb-margin-top-large">Destructive</h4>

      <p>Make a button destructive by adding the class <code class="cb-inline-code">.cb-destructive</code></p>
      <div class="cb-margin-default-vertical cb-flex cb-gap-default cb-flex-wrap-wrap">
        <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>
      </div>

      <div class="cb-code-block-container">
        <pre
          class="cb-caption cb-monospace fullwidth cb-no-margin">&lt;button onclick="alert('Destructive button');" class="cb-button cb-destructive"&gt;Destructive button&lt;/button&gt;
&lt;button onclick="alert('Destructive text-only button');" class="cb-button cb-destructive cb-text-only"&gt;Destructive text-only button&lt;/button&gt;</pre>
      </div>

    </div>

    <h3 id="links" class="cb-h6 cb-margin-bottom-large cb-margin-top-large">Links styled as buttons</h3>


    <p>in the examples above, an HTML <code class="cb-inline-code">&lt;button></code> element was used, but the
      class <code class="cb-inline-code">.cb-button</code> can also be applied to other elements. Here's an HTML
      <code class="cb-inline-code">&lt;a></code> element styled like a Casebook button:
    </p>
    <div class="cb-margin-default-vertical">
      <a class="cb-button cb-primary" href="#links">
        Link styled like a button
      </a>
    </div>

    <div class="cb-code-block-container">
      <pre>&lt;a class="cb-button cb-primary" href="#links"&gt;
  Link styled like a button
&lt;/a&gt;</pre>
    </div>

  </main>
</body>

</html>