04-button-with-hover-effect.mustache

<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
  <div class="inline-flex flex-col space-y-2">
    {{> atoms-basic-button(classes: "btn--black btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--grey-800 btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--grey-700 btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--grey-500 btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--grey-125 btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--white btn--fading btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--green-100 btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--red-100 btn--hoveractive") }}
  </div>
  <div class="inline-flex flex-col space-y-2">
    {{> atoms-icon-button(classes: "btn--black btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--grey-800 btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--grey-700 btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--grey-500 btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--grey-125 btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--white btn--fading btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--green-100 btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--red-100 btn--hoveractive") }}
  </div>
</div>