@ussebastian/kitdigital/docs/components/content/buttons-variations.html

Kit Digital de la Universidad San Sebastián

<div>
  <section class="mb-160">
    <div class="row flex mb-40">
      <h4>Botón primario</h4>
      <div class="col">
        <p>Default</p>
        <a href="#" class="uss-btn uss-btn--primary mb-24">
          Botón primario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--primary mb-24">
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón primario
        </a>
        <a href="#" class="uss-btn uss-btn--primary mb-24"> Botón primario </a>
      </div>
      <div class="col">
        <p>Hover</p>
        <a href="#" class="uss-btn uss-btn--primary hover mb-24">
          Botón primario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--primary hover mb-24">
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón primario
        </a>
        <a href="#" class="uss-btn uss-btn--primary hover mb-24"> Botón primario </a>
      </div>
      <div class="col">
        <p>Active</p>
        <a href="#" class="uss-btn uss-btn--primary active mb-24">
          Botón primario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--primary active mb-24">
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón primario
        </a>
        <a href="#" class="uss-btn uss-btn--primary active mb-24"> Botón primario </a>
      </div>

      <div class="col">
        <p>Disable</p>
        <a href="#" class="uss-btn uss-btn--primary mb-24" aria-disabled="true">
          Botón primario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--primary mb-24" aria-disabled>
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón primario
        </a>
        <a href="#" class="uss-btn uss-btn--primary mb-24" aria-disabled="true"> Botón primario </a>
      </div>
    </div>
    <div class="row flex mb-40">
      <h4>Botón primario - Medium</h4>
      <div class="col">
        <p>Default</p>
        <a href="#" class="uss-btn uss-btn--primary uss-btn--medium mb-24">
          Botón primario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--primary uss-btn--medium mb-24">
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón primario
        </a>
        <a href="#" class="uss-btn uss-btn--primary uss-btn--medium mb-24"> Botón primario </a>
      </div>
      <div class="col">
        <p>Hover</p>
        <a href="#" class="uss-btn uss-btn--primary uss-btn--medium hover mb-24">
          Botón primario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--primary uss-btn--medium hover mb-24">
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón primario
        </a>
        <a href="#" class="uss-btn uss-btn--primary uss-btn--medium hover mb-24">
          Botón primario
        </a>
      </div>
      <div class="col">
        <p>Active</p>
        <a href="#" class="uss-btn uss-btn--primary uss-btn--medium active mb-24">
          Botón primario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--primary uss-btn--medium active mb-24">
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón primario
        </a>
        <a href="#" class="uss-btn uss-btn--primary uss-btn--medium active mb-24">
          Botón primario
        </a>
      </div>

      <div class="col">
        <p>Disable</p>
        <a href="#" class="uss-btn uss-btn--primary uss-btn--medium mb-24" aria-disabled="true">
          Botón primario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--primary uss-btn--medium mb-24" aria-disabled>
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón primario
        </a>
        <a href="#" class="uss-btn uss-btn--primary uss-btn--medium mb-24" aria-disabled="true">
          Botón primario
        </a>
      </div>
    </div>
    <div class="row flex mb-40">
      <h4>Botón primario - small</h4>
      <div class="col">
        <p>Default</p>
        <div class="flex flex-col items-start">
          <a href="#" class="uss-btn uss-btn--small uss-btn--primary mb-24">
            Botón primario
            <i class="uss-icon ri-arrow-right-circle-line"></i>
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--primary mb-24">
            <i class="uss-icon ri-arrow-right-circle-line"></i>
            Botón primario
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--primary mb-24"> Botón primario </a>
        </div>
      </div>
      <div class="col">
        <p>Hover</p>
        <div class="flex flex-col items-start">
          <a href="#" class="uss-btn uss-btn--small uss-btn--primary hover mb-24">
            Botón primario
            <i class="uss-icon ri-arrow-right-circle-line"></i>
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--primary hover mb-24">
            <i class="uss-icon ri-arrow-right-circle-line"></i>
            Botón primario
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--primary hover mb-24">
            Botón primario
          </a>
        </div>
      </div>
      <div class="col">
        <p>Active</p>
        <div class="flex flex-col items-start">
          <a href="#" class="uss-btn uss-btn--small uss-btn--primary active mb-24">
            Botón primario
            <i class="uss-icon ri-arrow-right-circle-line"></i>
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--primary active mb-24">
            <i class="uss-icon ri-arrow-right-circle-line"></i>
            Botón primario
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--primary active mb-24">
            Botón primario
          </a>
        </div>
      </div>
      <div class="col">
        <p>Disable</p>
        <div class="flex flex-col items-start">
          <a href="#" class="uss-btn uss-btn--small uss-btn--primary mb-24" aria-disabled="true">
            Botón primario
            <i class="uss-icon ri-arrow-right-circle-line"></i>
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--primary mb-24" aria-disabled>
            <i class="uss-icon ri-arrow-right-circle-line"></i>
            Botón primario
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--primary mb-24" aria-disabled="true">
            Botón primario
          </a>
        </div>
      </div>
    </div>
    <div class="row mb-40">
      <h4>Botón secundario</h4>
      <div class="col">
        <p>Default</p>
        <a href="#" class="uss-btn uss-btn--secondary mb-24">
          Botón secundario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--secondary mb-24">
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón secundario
        </a>
        <a href="#" class="uss-btn uss-btn--secondary mb-24"> Botón secundario </a>
      </div>
      <div class="col">
        <p>Hover</p>
        <a href="#" class="uss-btn uss-btn--secondary hover mb-24">
          Botón secundario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--secondary hover mb-24">
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón secundario
        </a>
        <a href="#" class="uss-btn uss-btn--secondary hover mb-24"> Botón secundario </a>
      </div>
      <div class="col">
        <p>Active</p>
        <a href="#" class="uss-btn uss-btn--secondary active mb-24">
          Botón secundario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--secondary active mb-24">
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón secundario
        </a>
        <a href="#" class="uss-btn uss-btn--secondary active mb-24"> Botón secundario </a>
      </div>
      <div class="col">
        <p>Disable</p>
        <a href="#" class="uss-btn uss-btn--secondary mb-24" aria-disabled="true">
          Botón secundario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--secondary mb-24" aria-disabled="true">
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón secundario
        </a>
        <a href="#" class="uss-btn uss-btn--secondary mb-24" aria-disabled="true">
          Botón secundario
        </a>
      </div>
    </div>
    <div class="row mb-40">
      <h4>Botón secundario - medium</h4>
      <div class="col">
        <p>Default</p>
        <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary mb-24">
          Botón secundario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary mb-24">
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón secundario
        </a>
        <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary mb-24"> Botón secundario </a>
      </div>
      <div class="col">
        <p>Hover</p>
        <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary hover mb-24">
          Botón secundario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary hover mb-24">
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón secundario
        </a>
        <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary hover mb-24">
          Botón secundario
        </a>
      </div>
      <div class="col">
        <p>Active</p>
        <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary active mb-24">
          Botón secundario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary active mb-24">
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón secundario
        </a>
        <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary active mb-24">
          Botón secundario
        </a>
      </div>
      <div class="col">
        <p>Disable</p>
        <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary mb-24" aria-disabled="true">
          Botón secundario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
        <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary mb-24" aria-disabled="true">
          <i class="uss-icon ri-arrow-right-circle-line"></i>
          Botón secundario
        </a>
        <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary mb-24" aria-disabled="true">
          Botón secundario
        </a>
      </div>
    </div>
    <div class="row mb-40">
      <h4>Botón secundario - small</h4>
      <div class="col">
        <p>Default</p>
        <div class="flex flex-col items-start">
          <a href="#" class="uss-btn uss-btn--small uss-btn--secondary mb-24">
            Botón secundario
            <i class="uss-icon ri-arrow-right-circle-line"></i>
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--secondary mb-24">
            <i class="uss-icon ri-arrow-right-circle-line"></i>
            Botón secundario
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--secondary mb-24"> Botón secundario </a>
        </div>
      </div>
      <div class="col">
        <p>Hover</p>
        <div class="flex flex-col items-start">
          <a href="#" class="uss-btn uss-btn--small uss-btn--secondary hover mb-24">
            Botón secundario
            <i class="uss-icon ri-arrow-right-circle-line"></i>
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--secondary hover mb-24">
            <i class="uss-icon ri-arrow-right-circle-line"></i>
            Botón secundario
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--secondary hover mb-24">
            Botón secundario
          </a>
        </div>
      </div>
      <div class="col">
        <p>Active</p>
        <div class="flex flex-col items-start">
          <a href="#" class="uss-btn uss-btn--small uss-btn--secondary active mb-24">
            Botón secundario
            <i class="uss-icon ri-arrow-right-circle-line"></i>
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--secondary active mb-24">
            <i class="uss-icon ri-arrow-right-circle-line"></i>
            Botón secundario
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--secondary active mb-24">
            Botón secundario
          </a>
        </div>
      </div>
      <div class="col">
        <p>Disable</p>
        <div class="flex flex-col items-start">
          <a href="#" class="uss-btn uss-btn--small uss-btn--secondary mb-24" aria-disabled="true">
            Botón secundario
            <i class="uss-icon ri-arrow-right-circle-line"></i>
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--secondary mb-24" aria-disabled="true">
            <i class="uss-icon ri-arrow-right-circle-line"></i>
            Botón secundario
          </a>
          <a href="#" class="uss-btn uss-btn--small uss-btn--secondary mb-24" aria-disabled="true">
            Botón secundario
          </a>
        </div>
      </div>
    </div>
    <div class="row mb-40">
      <h4>Botón terciario</h4>
      <div class="col">
        <p>Default</p>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--tertiary mb-24">
            Botón terciario
            <i class="uss-icon ri-arrow-right-line"></i>
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--tertiary mb-24">
            <i class="uss-icon ri-arrow-right-line"></i>
            Botón terciario
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--tertiary mb-24"> Botón terciario </a>
        </div>
      </div>
      <div class="col">
        <p>Hover</p>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--tertiary hover mb-24">
            Botón terciario
            <i class="uss-icon ri-arrow-right-line"></i>
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--tertiary hover mb-24">
            <i class="uss-icon ri-arrow-right-line"></i>
            Botón terciario
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--tertiary hover mb-24"> Botón terciario </a>
        </div>
      </div>
      <div class="col">
        <p>Active</p>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--tertiary active mb-24">
            Botón terciario
            <i class="uss-icon ri-arrow-right-line"></i>
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--tertiary active mb-24">
            <i class="uss-icon ri-arrow-right-line"></i>
            Botón terciario
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--tertiary active mb-24"> Botón terciario </a>
        </div>
      </div>
      <div class="col">
        <p>Disable</p>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--tertiary mb-24" aria-disabled="true">
            Botón terciario
            <i class="uss-icon ri-arrow-right-line"></i>
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--tertiary mb-24" aria-disabled="true">
            <i class="uss-icon ri-arrow-right-line"></i>
            Botón terciario
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--tertiary mb-24" aria-disabled="true">
            Botón terciario
          </a>
        </div>
      </div>
    </div>
    <div class="row mb-40">
      <h4>Botón terciario - medium</h4>
      <div class="col">
        <p>Default</p>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary mb-24">
            Botón terciario
            <i class="uss-icon ri-arrow-right-line"></i>
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary mb-24">
            <i class="uss-icon ri-arrow-right-line"></i>
            Botón terciario
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary mb-24"> Botón terciario </a>
        </div>
      </div>
      <div class="col">
        <p>Hover</p>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary hover mb-24">
            Botón terciario
            <i class="uss-icon ri-arrow-right-line"></i>
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary hover mb-24">
            <i class="uss-icon ri-arrow-right-line"></i>
            Botón terciario
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary hover mb-24">
            Botón terciario
          </a>
        </div>
      </div>
      <div class="col">
        <p>Active</p>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary active mb-24">
            Botón terciario
            <i class="uss-icon ri-arrow-right-line"></i>
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary active mb-24">
            <i class="uss-icon ri-arrow-right-line"></i>
            Botón terciario
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary active mb-24">
            Botón terciario
          </a>
        </div>
      </div>
      <div class="col">
        <p>Disable</p>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary mb-24" aria-disabled="true">
            Botón terciario
            <i class="uss-icon ri-arrow-right-line"></i>
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary mb-24" aria-disabled="true">
            <i class="uss-icon ri-arrow-right-line"></i>
            Botón terciario
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary mb-24" aria-disabled="true">
            Botón terciario
          </a>
        </div>
      </div>
    </div>
    <div class="row mb-40">
      <h4>Botón terciario - small</h4>
      <div class="col">
        <p>Default</p>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary mb-24">
            Botón terciario
            <i class="uss-icon ri-arrow-right-line"></i>
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary mb-24">
            <i class="uss-icon ri-arrow-right-line"></i>
            Botón terciario
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary mb-24"> Botón terciario </a>
        </div>
      </div>
      <div class="col">
        <p>Hover</p>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary hover mb-24">
            Botón terciario
            <i class="uss-icon ri-arrow-right-line"></i>
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary hover mb-24">
            <i class="uss-icon ri-arrow-right-line"></i>
            Botón terciario
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary hover mb-24">
            Botón terciario
          </a>
        </div>
      </div>
      <div class="col">
        <p>Active</p>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary active mb-24">
            Botón terciario
            <i class="uss-icon ri-arrow-right-line"></i>
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary active mb-24">
            <i class="uss-icon ri-arrow-right-line"></i>
            Botón terciario
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary active mb-24">
            Botón terciario
          </a>
        </div>
      </div>
      <div class="col">
        <p>Disable</p>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary mb-24" aria-disabled="true">
            Botón terciario
            <i class="uss-icon ri-arrow-right-line"></i>
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary mb-24" aria-disabled="true">
            <i class="uss-icon ri-arrow-right-line"></i>
            Botón terciario
          </a>
        </div>
        <div class="block">
          <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary mb-24" aria-disabled="true">
            Botón terciario
          </a>
        </div>
      </div>
    </div>
  </section>
</div>