JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<button type="submit" class="btn btn-primary btn-block">
  Valider le paiement
</button>

<button type="submit" disabled="" class="btn btn-primary btn-block">
  Valider le paiement
</button>

CSS

@font-face {
  font-family: "GLBaderCompress Adjusted";
  src: local(Arial Narrow);
  size-adjust: 85%;
}

.btn {
  display: inline-flex;
  gap: var(--c-button-gap, 0.5em);
  align-items: center;
  margin: 0;
  border: var(--c-button-border-width, 0.0625rem) solid var(--c-button-border, transparent);
  border-radius: var(--c-button-border-radius, 2.875em);
  padding: var(--c-button-padding-y, 0.75em) var(--c-button-padding-x, 1.75em);
  background-color: var(--c-button-background, transparent);
  color: var(--c-button-color, inherit);
  font-size: var(--c-button-font-size, 1rem);
  line-height: var(--c-button-line-height, 1.375);
  text-align: center;
  vertical-align: middle;
  transition: background-color 0.15s ease-in, color 0.15s ease-in, border 0.15s ease-in, box-shadow 0.15s ease-in;
  font-family: "GL Bader Compress", "GLBaderCompress Adjusted", sans-serif;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  -webkit-appearance: button;
  overflow: visible;
}

.btn:not(:disabled):not(.is-disabled) {
  cursor: pointer;
}

.btn:not(:disabled):not(.is-disabled):hover {
  border-color: var(--c-button-border--hover, transparent);
  background-color: var(--c-button-background--hover, transparent);
  color: var(--c-button-color--hover, inherit);
}

.btn:not(:disabled):not(.is-disabled):focus-visible {
  border-color: var(--c-button-border--focus, transparent);
  outline: none;
  box-shadow: 0 0 0 0.125em var(--c-button-box-shadow, #4f46e5);
}

.btn:not(:disabled):not(.is-disabled):active {
  border-color: var(--c-button-border--pressed, transparent);
  background-color: var(--c-button-background--pressed, transparent);
  color: var(--c-button-color--pressed, inherit);
}

.btn:not(:disabled):not(.is-disabled):hover,
.btn:not(:disabled):not(.is-disabled):focus-visible,
.btn:not(:disabled):not(.is-disabled):active {
  transition-timing-function: ease-out, ease-out, ease-out, ease-out;
}

.btn:disabled,
.btn.is-disabled...