<div class="content-container">
  
  <h1 class="title">Gradient buttons</h1>
  <p>The gradients are taken from <a href="https://uigradients.com" target="_blank" > https://uigradients.com</a></p>
  <div class="button-container">
    <button class="btn btn-default">Sample Button</button>
    <button class="btn btn-default">Sample Button</button>
    <button class="btn btn-default">Sample Button</button>
    <button class="btn btn-default">Sample Button</button>
  </div>
  
  
</div>

.content-container
  margin-top: 5vh
  width: 100vw
  background-color: #fff
  display: flex
  justify-content: center
  align-items: center
  flex-direction: column

p, .title
  padding-bottom: 10px
  font-family: 'Dosis', sans-serif
  
.title
  text-transform: uppercase
  font-family: 'Source Sans Pro', sans-serif
  
.button-container
  width: 70%
  background: #F5F7F8
  padding: 3% 10% 7% 10%
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  
  button
    text-transform: uppercase
    margin: 2vh 0vw
    width: 70%
    color: #fff
    font-size: 1.5rem
    padding-top: 1.75rem
    padding-bottom: 1.25rem
    border-radius: 10px
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.25)
    border: none
    cursor: pointer
    
    
    &:first-child
      font-family: 'Dosis', sans-serif
      background: linear-gradient(270deg, rgb(255, 78, 80), rgb(249, 212, 35))
      transition: font-size 0.25s
      &:hover
        font-size: 2rem
    
    &:nth-child(2)
      font-family: 'Fjalla One', sans-serif
      background: linear-gradient(270deg, rgb(229, 93, 135), rgb(95, 195, 228))
      background-size: 200% 200%
      animation: changeBg 2s ease infinite
      &:hover
        animation: changeBg 0.5s ease infinite

    &:nth-child(3)
      font-family: 'Lato', sans-serif
      background: linear-gradient(270deg, rgb(103, 178, 111), rgb(76, 162, 205))
      background-size: 200% 200%
      animation: changeBg 5s ease infinite
      &:hover
        animation: changeBg 0.25s ease infinite

    &:nth-child(4)
      font-family: 'Source Sans Pro', sans-serif
      background: linear-gradient(270deg, rgb(178, 69, 146), rgb(241, 95, 121))
      transition: font-size 0.25s
      &:hover
        font-size: 2rem
    
        
@keyframes changeBg
  0%
    background-position: 0% 50%
  50%
    background-position: 100% 50%
  100%
    background-position: 0% 50%

@-webkit-keyframes changeBg
  0%
    background-position: 0% 50%
  50%
    background-position: 100% 50%
  100%
    background-position: 0% 50%

@-moz-keyframes changeBg
  0%
    background-position: 0% 50%
  50%
    background-position: 100% 50%
  100%
    background-position: 0% 50%