<div>
  <a href="javascript:;" class="button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false" class="button__icon">
      <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
    </svg>
    Button Link
  </a>
</div>

<div>
  <a href="javascript:;" class="button button--small"><span class="button__icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false" class="button__icon">
        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
      </svg>
    </span>
    Button Link
  </a>
</div>

<div>
  <button class="button" type="button">Real Button <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false" class="button__icon button__icon--end">
      <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
    </svg></button>
</div>

<div>
  <a href="javascript:;" class="button icon-button" aria-label="Icon-only Button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" class="icon-button__icon" aria-hidden="true" focusable="false">
      <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
    </svg>
  </a>
</div>

// Learn about this technique
// @link https://moderncss.dev/icon-button-css-styling-guide/

$btnColor: #3e68ff;

* {
  box-sizing: border-box;
}

.button__icon {
  width: 0.9em;
  height: 0.9em;
  fill: currentcolor;
  margin-right: 0.5em;

  &--end {
    margin-right: 0;
    margin-left: 0.5em;
  }
}

// Due to the cascade, find .icon-button after the .button

// Base button styles
.button {
  // Reset
  text-decoration: none;
  border: none;
  font-family: inherit;
  cursor: pointer;

  // Display
  display: inline-flex;
  align-items: center;
  justify-content: center;
  // Optional - see "Gotchas"
  align-self: start;

  // Visual
  font-size: 1.5rem;
  background-color: $btnColor;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);

  // Size
  &:not(.icon-button) {
    padding: 0.25em 0.75em;
    min-width: 10ch;
    min-height: 44px;
  }

  // Text
  text-align: center;
  line-height: 1.1;

  transition: 220ms all ease-in-out;

  &:hover,
  &:active {
    background-color: scale-color($btnColor, $lightness: -20%);
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 4px scale-color($btnColor, $lightness: -40%);
  }

  &--small {
    font-size: 1.15rem;
  }
}

.icon-button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  padding: 0.35em;

  &__icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma,
    Sans-Serif;
}

div {
  display: flex;

  & + div {
    margin-top: 2rem;
  }
}