CodePen

HTML

            
              <div class="btn">
    <div class="back"></div>
    <a href="#">This is just a simple button</a>
 </div>
            
          
!
via HTML Inspector

CSS

            
              html, body {
  margin: 0;
  padding: 0;
  background-color: grey;
}

a {
  text-decoration: none;
  color: white;
  font-size: 20px;
  font-family: Helvetica, sans-serif;
}

.btn {
  position: relative;  
  background: black;
  color: white;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
  cursor: pointer;
  position: relative;
  top: 20px;
  left: 20px;
}

.btn a {
  position: relative;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

.back {
  position: absolute;
  background-color: white;
  width: 100%;
  height: 00%;
  top: 0px;
  left: 0px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

.btn:hover a {
  color: black;
}

.btn:hover .back {
  height: 100%;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................