Create A Animated Button In CSS, HTML By #BKTutorial

Source code:

1) Index.html

<link rel="stylesheet" href="style.css">

<a href="#">

  <div class="box">

     <div class="inner_box"><h4>BUTTON</h4></div>

  </div>

</a>

2) style.css

@charset "utf-8";

/* CSS Document */

body

{

  margin:0;

  padding:0;

  font-family:Roboto;

  background:#09F;

}

.box

{

  position:absolute;

  top:50%;

  left:50%;

  transform:translate(-50%,-50%);

  width:150px;

  height:40px;

  background:rgba(255,255,255,.5);

  box-sizing:border-box;

  padding:3px;

}

.inner_box

{

 position:relative;

 width:100%;

 height:100%;

 background:#09F;

 overflow:hidden; 

}

.box:before

{

  content:'';

  position:absolute;

  top:0;

  left:-50%;

  width:50%;

  height:100%;

  background:#09F;

  transition:.5s;

}

.box:after

{

  content:'';

  position:absolute;

  top:0;

  right:-50%;

  width:50%;

  height:100%;

  background:#09F;

  transition:.5s;

  z-index:10;

}

.inner_box:before

{

  content:'';

  position:absolute;

  top:0;

  left:-50%;

  width:50%;

  height:100%;

  background:#262626;

  transition:1s;

}

.inner_box:after

{

  content:'';

  position:absolute;

  top:0;

  right:-50%;

  width:50%;

  height:100%;

  background:#262626;

  transition:1s;

  z-index:11;

}

.box:hover:before

{

  left:0;

}

.box:hover:after

{

  right:0;

}

.box:hover .inner_box:before

{

  left:0;

}

.box:hover .inner_box:after

{

  right:0;

}

h4

{

  position:absolute;

  color:#262626;

  top:50%;

  left:50%;

  transform:translate(-50%,-50%);

  text-align:center;

  z-index:100;

  margin:0;

  padding:0;

  letter-spacing:3px;

  transition:.5s;

}

.box:hover h4

{

  color:#fff;

  font-family:Roboto;

}