<div class="grid--buttons">
    <div class="button_cont">
        <button class="button--marco" onclick="goMacro('test'); return false;">Button One</button></div>
    <div class="button_cont">
        <button class="button--marco" onclick="goMacro('test'); return false;">Button Two</button></div>
    <div class="button_cont">
        <button class="button--marco" onclick="goMacro('test'); return false;">Button Three</button>
    </div>
    <div class="button_cont">
        <button class="button--marco" onclick="goMacro('test'); return false;">Button Four</button>
    </div>
     <div class="button_cont">
        <button class="button--marco" onclick="goMacro('test'); return false;">Button Five</button>
    </div>
        <div class="button_cont">
        <button class="button--marco" onclick="goMacro('test'); return false;">Button Six</button>
    </div>
</div>
$primary: #e35874;
$primary-opacity: #e35874fa;

$secondary: #062a77;

@mixin transition{
  transition: all .3s ease-in-out;
}

.grid--buttons {
    max-width:1000px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: 20px;
}

.button--marco {
  background-color: $primary;
  color: white;
  border: 1px solid  $primary;
  padding: .95rem;
  width:100%;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  @include transition;
  box-shadow: 0 0 0px $primary-opacity;
  @media(min-width: 768px) {
      &:hover{
        box-shadow: 0 0 10px $primary-opacity;
      }
  }

  &.active{
      border: 1px solid  $secondary;
      background-color: $secondary;
      color: white;
      @include transition;
  }
}
View Compiled 
document.querySelectorAll('.button--marco').forEach(function(button){
  button.addEventListener('mousedown', function (e){
    this.classList.add('active')
    if (this.classList.contains('active')) {
        setTimeout(() => { this.classList.remove('active') }, 500);
    }
  });
})


function goMacro(hello) {
  return;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.