CSS Cool Button

---

HTML CODE:

<a href="#"><span></span>code blogger</a>

---

CSS MENU:

body{
  padding:0;
  margin:0;
  background-color:#000;
  font-family:verdana;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
a{
  text-decoration:none;
  color:#fff;
  text-transform:uppercase;
  padding:20px 20px 20px 30px;
  position:relative;
  letter-spacing: 8px;
  font-size:40px;
}
a:before{
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  background-color:#fff;
  width:100%;
  height:2px;
    transition-property: height,width;
    transition-delay: 0.5s,1s;
    transition-duration: 0.5s;
}
a:hover:before{
  transition-property: width,height;
    width: 2px;
    height:100% 
}
a span{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#e65c00;
  z-index:-1;
  transition:transform .5s;
  transform:scaleX(0);
  transform-origin:right;
  transition-delay:1s;
}
a:hover span{
  transform:scaleX(1);
  transition-delay:1.5s;
}
a:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  background-color:#fff;
  width:100%;
  height:2px;
    transition-property: height,width;
    transition-delay: 0.5s,1s;
    transition-duration: 0.5s;
}
a:hover:after{
  transition-property: width,height;
    width: 2px;
    height:100% 
}
a span:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:red;
  z-index:-1;
  transition: transform .5s;
  transform:scaleX(0);
  transform-origin:left;
  transition-delay:0s;
}
a:hover span:before{
  transform:scaleX(1);
  transition-delay:1.5s;
}