HTML & CSS Button Components

<a class="btn btn--primary" href="/contact/">Contact Us</a>

.btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: $secondary-font;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  padding: $ic--100 $ic-400;
  text-decoration: none;
  transition: $transition;
  width: fit-content;

  &:hover,
  &:focus {
    transition: $transition;
  }
}

.btn--primary {
  color: $white;
  background-color: $primary-color;
  transition: $transition;

  &:hover,
  &:focus {
    color: $white;
    background-color: $dark-black;
  }
}

<a class="btn btn--primary btn--rounded" href="/contact/">Contact Us</a>

.btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: $secondary-font;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  padding: $ic--100 $ic-400;
  text-decoration: none;
  transition: $transition;
  width: fit-content;

  &:hover,
  &:focus {
    transition: $transition;
  }
}

.btn--primary {
  color: $white;
  background-color: $primary-color;
  transition: $transition;

  &:hover,
  &:focus {
    color: $white;
    background-color: $dark-black;
  }
}

.btn--rounded {
  border-radius: 50px;
}

<a class="btn btn--secondary" href="/contact/">Contact Us</a>

.btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: $secondary-font;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  padding: $ic--100 $ic-400;
  text-decoration: none;
  transition: $transition;
  width: fit-content;

  &:hover,
  &:focus {
    transition: $transition;
  }
}

.btn--secondary {
  color: $white;
  background-color: $primary-color;
  transition: $transition;

  &:hover,
  &:focus {
    color: $white;
    background-color: $secondary-color;
  }
}

<a class="btn btn--primary btn--slanted" href="/contact/">Contact Us</a>

.btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: $secondary-font;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  padding: $ic--100 $ic-400;
  text-decoration: none;
  transition: $transition;
  width: fit-content;

  &:hover,
  &:focus {
    transition: $transition;
  }
}

.btn--primary {
  color: $white;
  background-color: $primary-color;
  transition: $transition;

  &:hover,
  &:focus {
    color: $white;
    background-color: $dark-black;
  }
}

.btn--slanted {
  clip-path: polygon(5% 0%,100% 0%,95% 100%,0% 100%);
}

<a class="btn btn--gradient" href="/contact/">Contact Us <svg xmlns="http://www.w3.org/2000/svg" class="arrow-right" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a>

.btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: $secondary-font;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  padding: $ic--100 $ic-400;
  text-decoration: none;
  transition: $transition;
  width: fit-content;

  &:hover,
  &:focus {
    transition: $transition;
  }
}

.btn--gradient {
  background-size: 300% 100%;
  background-image: linear-gradient(
    to right,
    $primary-color 0%,
    $secondary-color 15%,
    $secondary-color 85%,
    $primary-color 100%
  );
  color: $white;

  svg {
    position: relative;
    top: 3px;
    width: 20px;
    height: 20px;
    margin-left: 1rem;
    fill: transparent;
    stroke: #fff;
    transition: .3s ease-in-out;
  }

  &:hover,
  &:focus {
    background-position: 100% 0;
    transition: all 0.4s ease-in-out;
    color: $white;

    svg {
      transform: translate(5px);
    }
  }
}

<a class="btn btn--arrow flex flex-center mt-2" href="#">Learn More About Feature <span class="icon-sm icon-stroke-primary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></span></a>

.btn--arrow {
  display: flex;
  align-items: center;
  padding: 0;

  &:hover, 
  &:focus {
    .icon-sm {
      transform: translate(8px);
    }
  }
}

.btn--arrow .icon-sm {
  position: relative;
  top: -1px;
  margin-left: .5rem;
  transition: .3s ease-in-out;
}

<a class="btn btn--split" href="/contact/">Contact Us <div class="btn__icon icon-md icon-stroke-white"><svg xmlns="http://www.w3.org/2000/svg" class="arrow-right" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div></a>

.btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: $secondary-font;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  padding: $ic--100 $ic-400;
  text-decoration: none;
  transition: $transition;
  width: fit-content;

  &:hover,
  &:focus {
    transition: $transition;
  }
}

.btn--split {
  display: flex;
  font-size: .75rem;
  padding: $ic-100 $ic-400;
  border: none;
  color: $primary-color;
  background-color: $body-black;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(100% + 3px);
    background-color: $primary-color;
    height: 100%;
    aspect-ratio: 1/1;
    transition: $transition;
  }

  &:hover,
  &:focus {
    .btn__icon {
      transform: translateX(8px);
    }

    &::after {
      transform: translateX(8px) rotate(45deg);
    }
  }
}

.btn__icon {
  position: absolute;
  left: calc(100% + 18px);
  z-index: 1;
  transition: $transition;
}