Buttons - just some clean minimal buttons - https://jsfiddle.net/t6vpykbp/152/

index

  <div class="btn-group">
    <button class="cta-primary" title="Primary"><span>Primary</span><svg class="right-arrow"><use xlink:href="#right-arrow"></use></svg></button><br>
    <button class="cta-secondary" title="Secondary"><span>Secondary</span><svg class="right-arrow"><use xlink:href="#right-arrow"></use></svg></button><br>
    <a href="#" class="cta-tertiary" title="Tertiary"><span>Tertiary</span><svg class="right-arrow"><use xlink:href="#right-arrow"></use></svg></a>
  </div>

  <svg xmlns="//www.w3.org/2000/svg" width="0" height="0" display="none"><symbol id="right-arrow" viewBox="0 0 188.88 175.79"><path class="right-arrow" d="M72.9,5.4c7.1-7.1,18.9-7.1,26.2,0l69.4,69.4c7.1,7.3,7.1,19,0,26.2l-69.4,69.4c-7.3,7.3-19,7.3-26.2,0	c-9.4-9.9,11.1-37.6,20.8-62.4H12.2C5.5,108,0,102.4,0,95.8l0-18.7c0-6.8,5.5-12.3,12.2-12.3h80.5C82.6,41.4,64.3,16.4,72.9,5.4z" /></symbol></svg>

script.js

  (function(Obj, undefined) {
      const create = element => document.createElement(element),
        append = (parent, element) => parent.appendChild(element),
        prepend = (parent, element) => parent.insertBefore(element, parent.firstChild),
        toggleState = (element, stateType) => element.setAttribute(stateType, element.getAttribute(stateType) === 'false' ? 'true' : 'false'),
        debounce = (func, time) => {
          let timer
          return function(...args) {
            const context = this
            clearTimeout(timer)
            timer = setTimeout(() => func.apply(context, args), time)
          }
        },
        activeElDimensions = () => {
          element = activeEl
          let elDimensions = element.getBoundingClientRect()
          indicator.setAttribute('style', 'width:' + elDimensions.width + 'px;height:' + elDimensions.height + 'px;left:' + elDimensions.left + 'px;top:' + elDimensions.top + 'px')
          indicator.setAttribute('data-target', element.getAttribute('class'))
        },
        handleTabs = e => {
          activeEl = e.target || document.activeElement;
          if (e.key === 'Tab') {
            bodyEl.setAttribute('data-tab-user', !0)
            window.addEventListener('mousedown', handleClick)
            window.removeEventListener('mousedown', handleTabs)
            activeElDimensions()
          }
        },
        handleClick = () => {
          bodyEl.setAttribute('data-tab-user', !1)
          window.removeEventListener('mousedown', handleClick)
          window.addEventListener('keydown', handleTabs)
        };
     
      let activeEl = document.activeElement,
        bodyEl = document.body,
        indicator = create('div');

      
      Obj.init = () => {
        indicator.classList.add('active-element-indicator');
        append(bodyEl, indicator);
        const Fn = {
          activeElDimensions
        }
        window.addEventListener('keydown', handleTabs, !1)
        window.addEventListener('resize', debounce(activeElDimensions, 225), !1)
      }

    }(window.Obj = window.Obj || {}))

    Obj.init()

styles.css

  /*! defaults */

    * {
      box-sizing: border-box
    }

    :root {
      font: 400 100%/1.75 sans-serif
    }

    body {
      min-height: 100%;
      background-color: #efefef;
      font-size: 1rem;
      letter-spacing: .063rem;
      transition: font-size .2s, letter-spacing .2s
    }

    input,
    select,
    textarea,
    button {
      font: inherit;
      letter-spacing: inherit
    }

    body {
      margin: 0
    }

    body:focus,
    a:focus,
    input:focus,
    textarea:focus,
    select:focus,
    button:focus {
      outline: none
    }

    .btn-group {
      background-color: white;
      text-align: center;
      padding: 3rem 1rem;
      position: relative;
      margin: 0 auto;
      min-height: 1000px;
    }

    [class^='cta-']:hover,
    [class^='cta-']:hover:before,
    [class^='cta-']:hover .right-arrow {
      will-change: transform
    }

    [class^='cta-'] {
      backface-visibility: hidden;
      border-radius: 2px;
      text-decoration: none;
      box-shadow: 0 5px 12px hsla(0, 0%, 0%, .2);
      display: inline-block;
      font-size: 80%;
      margin-bottom: 1rem;
      line-height: 1;
      -webkit-tap-highlight-color: transparent;
      padding: 14px 24px;
      perspective: 1px;
      position: relative;
      z-index: 2;
      transform: translateZ(0);
      transition: all .2s, box-shadow .4s
    }

    [class^='cta-']::-moz-focus-inner {
      border: 0
    }

    [class^='cta-']:hover {
      box-shadow: 0 5px 16px hsla(0, 0%, 0%, .333);
      cursor: pointer
    }

    [class^='cta-']:active {
      box-shadow: 0 3px 8px hsla(0, 0%, 0%, .2);
      perspective: 1px;
      transform: translate3d(0, 1px, 0)
    }

    [class^='cta-']>* {
      vertical-align: middle
    }

    [class$='-primary'] {
      background-color: hsl(6, 74%, 50%);
      border: 1px solid hsl(6, 74%, 50%);
      border-bottom-color: hsl(6, 63%, 46%);
      color: #fff
    }

    [class$='-secondary'] {
      background-color: hsl(210, 25%, 21%);
      border: 1px solid hsl(210, 25%, 21%);
      border-bottom-color: hsl(210, 29%, 24%);
      color: #fff
    }

    [class$='-tertiary'] {
      background-color: hsl(184, 5%, 54%);
      border: 1px solid hsl(184, 5%, 54%);
      border-bottom-color: hsl(184, 6%, 53%);
      color: #fff
    }

    [class$='-primary']:hover:not(:active) {
      background-color: hsl(6, 76%, 54%);
      border: 1px solid hsl(6, 76%, 54%);
    }

    [class$='-secondary']:hover:not(:active) {
      background-color: hsl(210, 27%, 25%);
      border: 1px solid hsl(210, 27%, 25%);
    }

    [class$='-tertiary']:hover:not(:active) {
      background-color: hsl(184, 7%, 58%);
      border: 1px solid hsl(184, 7%, 58%);
    }

    [class^='cta-'] .right-arrow {
      backface-visibility: hidden;
      fill: hsl(0, 0%, 100%);
      height: .8rem;
      margin-left: .125rem;
      perspective: 1px;
      transform: translate3d(4px, 0, 0);
      transition: transform .2s;
      width: .8rem
    }

    [class^='cta-']:hover .right-arrow {
      transform: translate3d(6px, 0, 0);
      pointer-events: none
    }

    [class^='cta-']:hover:active .right-arrow {
      transform: translate3d(6px, 0, 0)
    }

    [data-tab-user='true'] .active-element-indicator {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
      width: 1px;
      height: 1px;
      transition: all .3s;
      vertical-align: middle;
      perspective: 1px;
      transform: translate3d(0, 0, 0);
      transition: opacity .2s
    }

    [data-tab-user='true'] .active-element-indicator:before {
      content: '';
      position: absolute;
      border-radius: 2px;
      z-index: -1;
      border: 1px solid #4af;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-name: ripple
    }

    [data-tab-user='true'] .active-element-indicator {
      display: inline-block
    }

    [data-tab-user='false'] .active-element-indicator,
    [data-tab-user='true'] .active-element-indicator[data-target='null'] {
      display: none
    }

    @media (min-width:37.5em) {
      .btn-group {
        max-width: 37.5rem;
        box-shadow: -100px 0 100px -100px hsla(0, 0%, 0%, .25), 100px 0 100px -100px hsla(0, 0%, 0%, .25)
      }
      body {
        font-size: 1.125rem
      }
    }

    @media (min-width:60em) {
      body {
        font-size: 1.25rem
      }
    }

    @keyframes ripple {
      100% {
        top: -.675rem;
        right: -.675rem;
        bottom: -.675rem;
        left: -.675rem;
        opacity: 0;
      }
    }