Button Fill Animation

Button-Fill-Animation.markdown

Button Fill Animation

A Pen by David Stubbs on CodePen.

License.

index.html

<button class="fill">View Story</button>
<button class="svg">View Story</button>
<button class="arrow">View Story</button>
<button class="slide">&nbsp;</button>
<button class="slide left">&nbsp;</button>
<button class="fade">View Story</button>

style.css

button {
  position: relative;
  //display:block;
  height: 45px;
  width: 150px;
  margin: 10px 7px;
  padding: 5px 5px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  color: #383736;
  border: 2px #383736 solid;
  border-radius: 4px;
  text-transform: uppercase;
  outline: 0;
  overflow:hidden;
  background: none;
  z-index: 1;
  cursor: pointer;
  transition:         0.08s ease-in;
  -o-transition:      0.08s ease-in;
  -ms-transition:     0.08s ease-in;
  -moz-transition:    0.08s ease-in;
  -webkit-transition: 0.08s ease-in;
}

.fill:hover {
  color: whitesmoke;
}

.fill:before {
  content: "";
  position: absolute;
  background: #383736;
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -1;
  -webkit-transition: top 0.09s ease-in;
}

.fill:hover:before {
  top: 0;
}

.fade:before{
  content:"→";
  position:absolute;
  color:#383736;
  left: 88%;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in;
}

.fade:hover:before{
  left:91%;
  opacity:1;
}

.fade:hover {
  border: 0px #fff solid;
  -webkit-transform: scale(1.04,1.04);
  -webkit-transition: border 0.3s ease-out;
  -webkit-transition: transform 250ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
}

.arrow{
  text-align:left;
  padding-left:17px;
}

.arrow:before{
  content:"→";
  position:absolute;
  color:#383736;
  left: 83%;
  opacity: 0;
  -webkit-transition: all 250ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
}

.arrow:hover:before{
  left:84%;
  opacity:1;
}

.arrow:hover {
  width:170px;
}


.slide:after{
  content:"View Story";
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  text-align:center;
  -webkit-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
}

.slide:before {
  content:"Read it →";
  height:100%;
  width:100%;
  position:absolute;
  color:#383736;
  left:-100%;
  opacity: 0;
  -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
}

.slide:hover{
  background:#383736;
}

.slide:hover:before{
  left:0;
  opacity:1;
  color:#fff;
}
.slide:hover:after{
  left:100%;
  opacity:0;
}

.slide.left:hover{
  background:none;
}

.slide.left:before {
  left:100%;
  color:#383736;
  -webkit-transition: all 425ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
}

.slide.left:hover:before{
  left:0;
}

.svg{
  -webkit-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
}

.svg:before{
  position:absolute;  
  content:"";
  background: url(http://f.cl.ly/items/3H3A0D1N281a2T280F3o/heist.svg) no-repeat center center;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
  opacity:0;
  -webkit-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

.svg:after {
  content: "";
  position: absolute;
  background: #d19b26;
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -2;
  -webkit-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000); 
}
.svg:hover{
  color:white;
  border: 0px #d19b26 solid;
}
.svg:hover:before {
  opacity: .8;
}
.svg:hover:after {
  top: 0;
}