JSFiddle - React, Tailwind, and code Playground

by Aleksandr Zidyganov

HTML

<a href="#3" class="integration-btn" role="button">
  <svg class="integration-btn__ico" width="24" height="24" fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 35" id="newcraft"><path d="M23.55 6.406l4.814-3.259L15.912 0l-4.815 3.259zM26.261 20.695L23.08 7.8 9.575 4.373 0 14.066zM19.897 34.984L26.206 22.2.941 15.793zM27.728 20.612l4.234-2.396 7.056-3.955-9.02-10.473L24.49 7.52zM22.94 32.06l13.588-14.735-4.373 2.451-4.372 2.451z"></path></svg>
  <div class="integration-btn__line">
    <div class="integration-btn__title">
      Apply via NewCraft
    </div>
    <div class="integration-btn__note">
      Get a decision in 20 minutes
    </div>
  </div>
</a>

SCSS

.integration-btn {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  padding: 8px 30px;
  box-shadow: inset 0 10px 20px rgba(255, 255, 255, 0.25),
    inset 0 10px 30px rgba(255, 255, 255, 0.25);
  cursor: pointer;
  border-radius: 11px;
  background-color: #7c42fd;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  &:hover {
    color: #fff;
    text-decoration: none;
    background-color: darken(#6a4ee0, 5%);
  }
  
  &__ico {
    margin-right: 8px;
  }

  &__title {
    font-size: 15px;
    font-weight: 600;
  }

  &__note {
    font-size: 14px;
    color: rgba(#fff, 0.7);
  }
}