.button,
button,
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 2.75rem;

  padding-inline: 1.1rem;

  border:
    1px solid var(--zoguy-color-primary);

  border-radius: var(--zoguy-radius-md);

  background: var(--zoguy-color-primary);

  color: #fff;

  font-weight: 600;

  text-decoration: none;

  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--zoguy-color-primary-hover);

  border-color:
    var(--zoguy-color-primary-hover);

  color: #fff;
}

.button:active {
  transform: translateY(1px);
}