@import url(http://fonts.lug.ustc.edu.cn/css?family=Oswald:700,300);
body{
  background: #142C57;
  font-family: 'Oswald', sans-serif;
}

main{
  margin: 40px auto;
  width: 400px;
  text-align: center;
}

button{
  width: 200px;
  height: 46px;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  position: relative;
  font-weight: 300;
  text-transform: uppercase;
  color: #009BA3;
  border-radius: 4px;
  
  &:hover{
    .gradient{
      left: -200px;
    }
  }
  
  span{
    background: #DEE9FF;
    display: inline-block;
    height: 36px;
    width: 190px;
    line-height: 36px;
    position: relative;
    z-index: 1;
    border-radius: 4px;
  }
}
.gradient{
  @include linear-gradient(90deg, #FF364C 25%,#02BAFF 25%, #02BAFF 75%, #FF364C 75%, #FF364C 100%);
  @include transition(all .4s ease-in-out);
  width: 400px;
  height: 46px;
  position: absolute;
  top: 0;
  left: 0;
  

}

input[type="range"]{
  margin-top: 40px;
  -webkit-appearance: none;
  
  &::-webkit-slider-runnable-track{
     @include linear-gradient(90deg, #FF364C 50%,#02BAFF 50%);
    height: 12px;
    width: 200px;
  }
  
  &::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 14px;
    height: 28px;
    margin-top: -8px;
    border: 0;
    background: #DEE9FF;
    
  }
  
  &:focus {
    outline: none;
  }
}