JSFiddle - React, Tailwind, and code Playground

by ken tsai

HTML

<div class="btn_w btn-noframe">
        <!-- <a href="appreciate">view</a> -->
      <a class="" href="<?php echo base_url();?>appreciate">
                       <!--  <span class="hover-out"><span class="hover-out_i">view</span></span>
                        
                        <span class="hover"><span class="hover_i">view</span></span> -->
                        <span class="view-link"><span>VIEW</span></span>
                    </a>
       
    </div>

CSS

.btn_w a {
    margin: 15px 5px;
    border: 1px solid #fff;
    padding: 10px 45px;
    color: #fff;
}


/*animation*/
.btn-noframe {
    /* width: auto; */
   
}
.btn-noframe a {
    border: 0px !important;

 transition: padding .4s ease-in;
    
}
.btn-noframe .view-link {
  background-color: #ccc;
   position: relative;
 
}
.btn-noframe .view-link span {
  
     transition: color .4s ease-in;
}

.btn-noframe .view-link:after {
    content: "";
    display: block;
        position: relative;
    width: 40px;
    height: 3px;
    background: #d94814;
    left: 0;
    top: -10px;
    transition: width .4s ease-in;
}
.btn-noframe:hover{
    width:0px;
}
.btn-noframe:hover a{
    background-color: transparent !important;
    /* padding:0px; */
}
.btn-noframe:hover .view-link  {
   /*transform: translate(-60px, 0);*/  
   /* width:50%; */
}
.btn-noframe:hover .view-link span {
    color: #d94814; 
}

.btn-noframe:hover .view-link:after {
    width: 0px;
}