h1 Who doesn't like fun buttons?
button.btn.first Button 1
button.btn.second Button 2
button.btn.third Button 3
button.btn.fourth Button 4
button.btn.fifth Button 5
button.btn.sixth Button 6
p Inspiration for new ways to make interactive buttons using linear-gradients, box-shadows, and pseudo classes!

//Colours
$green: #2ecc71;
$red: #e74c3c;
$blue: #3498db;
$yellow: #f1c40f;
$purple: #8e44ad;
$turquoise: #1abc9c;

// Reset and Layout Styles
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c3e50;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
}
body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}

h1 {
  color: $yellow;
  font-size: 4rem;
  text-transform: uppercase;
  display: block;
  width: 100%;
  text-align: center;
  
  @media screen and (max-width: 600px) {
    font-size: 3rem;
  }
}

p {
  color: $yellow;
  font-size: 1.2rem;
  // text-transform: uppercase;
  width: 100%;
  padding: 20px;
  text-align: center;
}


// Basic Button Style
.btn {
  box-sizing: border-box;
  appearance: none;
  background-color: transparent;
  border: 2px solid $red;
  border-radius: 0.6em;
  color: $red;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;

  &:hover,
  &:focus {
    color: #fff;
    outline: 0;
  }
}

//BUTTON 1
.first {
  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
  &:hover {
    box-shadow: 0 0 40px 40px $red inset;
  }
}

//BUTTON 2
.second {
  border-radius: 3em;
  border-color: $turquoise;
  color: #fff;
  background: {
    image: linear-gradient(to right, 
      transparentize($turquoise, 0.4),
      transparentize($turquoise, 0.4) 5%,
      $turquoise 5%, 
      $turquoise 10%,
      transparentize($turquoise, 0.4) 10%,
      transparentize($turquoise, 0.4) 15%,
      $turquoise 15%, 
      $turquoise 20%,
      transparentize($turquoise, 0.4) 20%,
      transparentize($turquoise, 0.4) 25%,
      $turquoise 25%, 
      $turquoise 30%,
      transparentize($turquoise, 0.4) 30%,
      transparentize($turquoise, 0.4) 35%,
      $turquoise 35%, 
      $turquoise 40%,
      transparentize($turquoise, 0.4) 40%,
      transparentize($turquoise, 0.4) 45%,
      $turquoise 45%, 
      $turquoise 50%,
      transparentize($turquoise, 0.4) 50%,
      transparentize($turquoise, 0.4) 55%,
      $turquoise 55%, 
      $turquoise 60%,
      transparentize($turquoise, 0.4) 60%,
      transparentize($turquoise, 0.4) 65%,
      $turquoise 65%, 
      $turquoise 70%,
      transparentize($turquoise, 0.4) 70%,
      transparentize($turquoise, 0.4) 75%,
      $turquoise 75%, 
      $turquoise 80%,
      transparentize($turquoise, 0.4) 80%,
      transparentize($turquoise, 0.4) 85%,
      $turquoise 85%, 
      $turquoise 90%,
      transparentize($turquoise, 0.4) 90%,
      transparentize($turquoise, 0.4) 95%,
      $turquoise 95%, 
      $turquoise 100%);
    position: 0 0;
    size: 100%;
  }
  transition: background 300ms ease-in-out;
  
  &:hover {
    background-position: 100px;
  }
}

//BUTTON 3
.third {
  border-color: $blue;
  color: #fff;
  box-shadow: 0 0 40px 40px $blue inset, 0 0 0 0 $blue;
  transition: all 150ms ease-in-out;
  
  &:hover {
    box-shadow: 0 0 10px 0 $blue inset, 0 0 10px 4px $blue;
  }
}

// BUTTON 4
.fourth {
  // background: $yellow;
  border-color: $yellow;
  color: #fff;
  background: {
    image: linear-gradient(45deg,$yellow 50%, transparent 50%);
    position: 100%;
    size: 400%;
  }
  transition: background 300ms ease-in-out;
  
  &:hover {
    background-position: 0;
  }
}

//BUTTON 5
.fifth {
  border-color: $purple;
  // border: 0;
  border-radius: 0;
  color: $purple;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 150ms ease-in-out;
  
  &:after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 100%;
    background: $purple;
    z-index: -1;
    transition: width 150ms ease-in-out;
  }
  
  &:hover {
    color: #fff;
    &:after {
      width: 110%;
    }
  }
}

//BUTTON 6
.sixth {
  border-radius: 3em;
  border-color: $green;
  color: $green;
  background: {
      image: linear-gradient(to bottom, transparent 50%, $green 50%);
      position: 0% 0%;
      size: 210%;
  }
  transition: background 150ms ease-in-out, color 150ms ease-in-out;
  
  &:hover {
    color: #fff;
    background-position: 0 100%;
  }
}