*, *:before, *:after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  padding-top:10%;
  text-align:center;
}
.btn-split {
  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:#333;
  background-image:linear-gradient(tomato, tomato);
  background-size:100%;border-bottom:5px solid tomato;
  
  &:before {
    content:attr(name);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background-image:linear-gradient(#333, #333);
    background-size:100%;
    color:white;
    transition:all .5s;
  }
  &:hover:before {height:5px;}
}