<button class="button">Click Me</button>
<a class="button" href="#">No, Please Click Me</a>

<button class="button is-outlined">Why Not Try Clicking Me?</button>
<a class="button is-outlined" href="#">Or Click Me For Once?!</a>

@import bourbon
  
// Feel free to edit these settings
// and try out different things.
$animation-speed: 150ms

$button-bg-color: tomato
$button-text-color: white
$button-text-size: 1.25em
$button-spacing: 1.5rem



// Here's the code for the buttons.
.button
  display: inline-block
  margin: $button-spacing / 2
  padding: ($button-spacing / 2) $button-spacing
  
  border: none
  border-radius: $button-spacing / 8
  outline: none

  background-color: $button-bg-color

  color: $button-text-color
  font-family: inherit
  font-size: $button-text-size
  font-weight: 400
  line-height: $button-spacing
  text-decoration: none
  text-align: center

  cursor: pointer
  transition: all $animation-speed ease-out

  &:focus,
  &:hover
    background-color: tint($button-bg-color, 10%)

    box-shadow: 0 0 0 ($button-spacing / 8) $button-text-color, 0 0 0 ($button-spacing / 4) tint($button-bg-color, 10%)

  &:active
    background-color: shade($button-bg-color, 5%)

    box-shadow: 0 0 0 ($button-spacing / 8) shade($button-bg-color, 5%), 0 0 0 ($button-spacing / 4) shade($button-bg-color, 5%)
    transition-duration: $animation-speed / 2

  &.is-outlined
    border: ($button-spacing / 8) solid $button-bg-color
    
    background-color: transparent
  
    color: $button-bg-color
  
    &:focus,
    &:hover
      border-color: tint($button-bg-color, 10%)
  
      color: tint($button-bg-color, 10%)
  
    &:active
      border-color: shade($button-bg-color, 5%)
  
      color: shade($button-bg-color, 5%)



// Not relevant for the buttons. 
// Only for this demo to look okay.
*, *::before, *::after
  box-sizing: border-box

html
  background-color: #fafafa

  font-family: Roboto, sans-serif

html, body
  height: 100%
  margin: 0
  padding: 0
  width: 100%

body
  align-items: center
  display: flex
  flex-flow: column nowrap
  justify-content: center

document.querySelector('.button').addEventListener('click', function (event) {
  event.preventDefault();
});