*, *:before, *:after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  padding-top:10%;
  text-align:center;
}
.btn-slice {
  position:relative;
  display:inline-block;
  padding:0 2rem;
  font-family:'Titillium Web', sans-serif;
  font-weight:700;
  text-decoration:none;
  font-size:3rem;
  line-height:4.5rem;
  color:tomato;
  background-color:transparent;
  border:5px solid tomato;
  
  &:after {
    content:'';
    position:absolute;
    z-index:-1;
    top:0;
    left:50%;
    height:100%;
    width:0;
    background-color:tomato;
    transition:width .5s, left .5s;
  }
  &:hover {color:white;}
  &:hover:after {
    top:0;
    left:0;
    width:100%;
    transition:width .5s, left .5s;
  }
}
// As far as I know Firefox doesn't supports background-clip: text
// With CSS Feature Queries I can easily sort all webkits out
// and serve some extra CSS sugar 
@supports (-webkit-background-clip: text) {
  .btn-slice {
    background-color:tomato;
    background-image:linear-gradient(white, white);
    background-repeat:no-repeat;
    background-size:0% 100%;
    background-position:center;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    transition:background-size .5s;
    
    &:hover {background-size:100% 100%;}
  }
}