Design system 1.0 | Stad Brugge

2.1 #Molecules.buttons Buttons

Your standard button suitable for clicking.
Example
.button
Link button Link button Link button Link button
.button .button--ghost
Link button Link button Link button
.button .button--large
Link button Link button Link button
.button .button--large .button--ghost
Link button Link button Link button
.button .button--small
Link button
Link button Link button
.button--cta
Link element
Markup: scss/styleguide/molecules/buttons/buttons.html
<div class="container pt-3">
  <div class="row">
    <div class="col-12 mb-3">
      <span class="kss__markup-title">.button</span>
    </div>
    <div class="col-12 mb-5 kss__button-container">
      <a href="https://www.google.be" class="button js-button" data-flip="Link button">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="button__content__label">
                Link button
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="button__content__label js-button-flip-label">
              </span>
            </span>
          </span>
      </a>
      <button class="button js-button" data-flip="Button element">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="button__content__label">
                Button element
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="button__content__label js-button-flip-label">
              </span>
            </span>
          </span>
      </button>
      <a href="https://google.com" class="button js-button" data-flip="Link button">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="icon--btn-wrapper me-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
              <span class="button__content__label">
                Link button
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="icon--btn-wrapper me-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
              <span class="button__content__label js-button-flip-label">
                Link button
              </span>
            </span>
          </span>
      </a>
      <a href="https://google.com" class="button js-button" data-flip="Link button">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="button__content__label">
                Link button
              </span>
              <span class="icon--btn-wrapper ms-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="button__content__label js-button-flip-label">
              </span>
              <span class="icon--btn-wrapper ms-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
            </span>
          </span>
      </a>
      <input type="button" class="button" value="input[type='button']" />
    </div>


    <div class="col-12 mb-3">
      <span class="kss__markup-title">.button .button--ghost</span>
    </div>
    <div class="col-12 mb-5 kss__button-container">
      <a href="https://www.google.be" class="button button--ghost js-button" data-flip="Link button">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="button__content__label">
                Link button
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="button__content__label js-button-flip-label">
              </span>
            </span>
          </span>
      </a>
      <button class="button button--ghost js-button" data-flip="Button element">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="button__content__label">
                Button element
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="button__content__label js-button-flip-label">
              </span>
            </span>
          </span>
      </button>
      <a href="https://google.com" class="button button--ghost js-button" data-flip="Link button">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="icon--btn-wrapper me-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
              <span class="button__content__label">
                Link button
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="icon--btn-wrapper me-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
              <span class="button__content__label js-button-flip-label">
              </span>
            </span>
          </span>
      </a>
      <a href="https://google.com" class="button button--ghost js-button" data-flip="Link button">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="button__content__label">
                Link button
              </span>
              <span class="icon--btn-wrapper ms-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="button__content__label js-button-flip-label">
              </span>
              <span class="icon--btn-wrapper ms-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
            </span>
          </span>
      </a>
      <input type="button" class="button button--ghost" value="input[type='button']" />
    </div>


    <div class="col-12 mb-3">
      <span class="kss__markup-title">.button .button--large</span>
    </div>
    <div class="col-12 mb-5 kss__button-container">
      <a href="https://www.google.be" class="button button--large js-button" data-flip="Link button">
        <span class="button__content__wrapper">
          <span class="button__content button__content--noflip">
            <span class="button__content__label">
              Link button
            </span>
          </span>
          <span class="button__content button__content--flip">
            <span class="button__content__label js-button-flip-label">
            </span>
          </span>
        </span>
      </a>
      <button class="button button--large js-button" data-flip="Button element">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="button__content__label">
                Button element
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="button__content__label js-button-flip-label">
              </span>
            </span>
          </span>
      </button>
      <a href="https://google.com" class="button button--large js-button" data-flip="Link button">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="icon--btn-wrapper me-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
              <span class="button__content__label">
                Link button
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="icon--btn-wrapper me-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
              <span class="button__content__label js-button-flip-label">
              </span>
            </span>
          </span>
      </a>
      <a href="https://google.com" class="button button--large js-button" data-flip="Link button">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="button__content__label">
                Link button
              </span>
              <span class="icon--btn-wrapper ms-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="button__content__label js-button-flip-label">
              </span>
              <span class="icon--btn-wrapper ms-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
            </span>
          </span>
      </a>
      <input type="button" class="button button--large" value="input[type='button']" />
    </div>

    <div class="col-12 mb-3">
      <span class="kss__markup-title">.button .button--large .button--ghost</span>
    </div>
    <div class="col-12 mb-5 kss__button-container">
      <a href="https://www.google.be" class="button button--large button--ghost js-button" data-flip="Link button">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="button__content__label">
                Link button
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="button__content__label js-button-flip-label">
              </span>
            </span>
          </span>
      </a>
      <button class="button button--large button--ghost js-button" data-flip="Button element">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="button__content__label">
                Button element
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="button__content__label js-button-flip-label">
              </span>
            </span>
          </span>
      </button>
      <a href="https://google.com" class="button button--large button--ghost js-button" data-flip="Link button">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="icon--btn-wrapper me-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
              <span class="button__content__label">
                Link button
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="icon--btn-wrapper me-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
              <span class="button__content__label js-button-flip-label">
              </span>
            </span>
          </span>
      </a>
      <a href="https://google.com" class="button button--large button--ghost js-button" data-flip="Link button">
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="button__content__label">
                Link button
              </span>
              <span class="icon--btn-wrapper ms-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="button__content__label js-button-flip-label">
              </span>
              <span class="icon--btn-wrapper ms-3">
                <i class="fa-light fa-circle-info"></i>
              </span>
            </span>
          </span>
      </a>
      <input type="button" class="button button--large button--ghost" value="input[type='button']" />
    </div>

    <div class="col-12 mb-3">
      <span class="kss__markup-title">.button .button--small</span>
    </div>
    <div class="col-12 mb-5 kss__button-container">
      <a href="https://www.google.be" class="button button--small">
        <span class="button__title">Link button</span>
      </a>
      <button class="button button--small">
        <span class="button__title">Button Element</span>
      </button>
      <a href="https://www.google.be" class="button button--small">
        <div class="icon--btn-wrapper me-3">
          <i class="fa-light fa-circle-info"></i>
        </div>
        <span class="button__title">Link button</span>
      </a>
      <button class="button button--small">
        <span class="icon--btn-wrapper me-3">
          <i class="fa-light fa-circle-info"></i>
        </span>
        <span class="button__title">Button Element</span>
      </button>
      <a href="https://www.google.be" class="button button--small">
        <span class="button__title">Link button</span>
        <div class="icon--btn-wrapper ms-3">
          <i class="fa-light fa-circle-info"></i>
        </div>
      </a>
      <button class="button button--small">
        <span class="button__title">Button Element</span>
        <span class="icon--btn-wrapper ms-3">
          <i class="fa-light fa-circle-info"></i>
        </span>
      </button>
    </div>

    <div class="col-12 mb-3">
      <span class="kss__markup-title">.button--cta</span>
    </div>
    <div class="col-12 col-md-6 col-lg-3 mb-5 kss__button-container">
      <a href="https://www.google.be" class="button--cta">
        <span class="button--cta__bg"></span>
        <span class="button--cta--left">
        <span class="icon--btn-wrapper me-3">
          <i class="fa-light fa-circle-info"></i>
        </span>
        <span class="button--cta--left--text">Link element</span>
      </span>
        <span class="button--cta--right icon--btn-wrapper ms-3">
          <i class="fa-regular fa-arrow-up-right"></i>
        </span>
      </a>
    </div>
  </div>
</div>
Source: ../client/scss/styleguide/molecules/buttons/_buttons.scss, line 1