<a href="/">Gradient button</a>

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900')

body
  display flex
  align-items center
  justify-content center
  height 100vh
  background-color #303030 
  margin 0
  font-family: 'Source Sans Pro', sans-serif;
  &:after
    content ""
    opacity .7
    width 100%
    min-height 100vh
    background: #303033 url(http://subtlepatterns.com/patterns/broken_noise.png);
    position absolute
    z-index -1  
  
a
  padding 1.5em 4em
  position relative
  z-index 2
  display inline-block
  text-decoration none
  color rgba(#fff,.7)
  box-sizing border-box
  text-align center
  text-transform uppercase
  background-color transparent
  font-size 1.1em
  transition: 0.3s;
  border: 4px solid green  
  border-image-source: linear-gradient(to right, #016062 0%, #4a5e8c 44%, #4a5e8c 49%, #4a5e8c 57%, #744a9e 100%);
  border-image-slice: 4
  overflow hidden
  &:hover
    color #fff
    &:after
      width 120%
  &:after
    content ""
    position: absolute;
    transition: 0.3s;
    content: '';
    width: 0;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(to right, #016062 0%, #4a5e8c 44%, #4a5e8c 49%, #4a5e8c 57%, #744a9e 100%);
    height: 120%;
    left: -10%;
    transform: skewX(15deg);
    z-index: -1;