JSFiddle - React, Tailwind, and code Playground

by Kim Ara

HTML

<a href="#none">
    <button class="main-prd-btn font-poppin"><span>Read More</span></button>
  </a>

CSS

a{border:0;outline:0}
.main-prd-btn{
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 155px;
  height: 46px;
  font-size: 15px;
  color: #354cd8;
  border-radius: 46px;
  -moz-border-radius: 46px;
  -webkit-border-radius: 46px;
  -o-border-radius: 46px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.main-prd-btn:before{
  display: block;
  position: absolute;
  top: 0px;
  left: -130%;
  content: "";
  width: 130%;
  height: 100%;
  border-radius: 0 42px 42px 0;
  opacity: 0;
  filter: Alpha(opacity=0);
  background: rgb(255,90,111);
  background: -moz-linear-gradient(left, rgba(255,90,111,1) 0%, rgba(255,172,111,1) 100%);
  background: -webkit-linear-gradient(left, rgba(255,90,111,1) 0%,rgba(255,172,111,1) 100%);
  background: linear-gradient(to right, rgba(255,90,111,1) 0%,rgba(255,172,111,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5a6f', endColorstr='#ffac6f',GradientType=1 );
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
a:hover .main-prd-btn:before{
  left: 0px;
  opacity: 1.0;
  filter: Alpha(opacity=100);
}
.main-prd-btn span{
      position: relative;
    z-index: 1;
    color: #354cd8;
}
a:hover .main-prd-btn span {
    color: #fff;
}
.main-prd-btn:after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: inline-block;
    content: "";
    width: 151px;
    height: 42px;
    border: 2px solid #344bd4;
    border-radius: 46px;
    -moz-border-radius: 46px;
    -webkit-border-radius: 46px;
    -o-border-radius: 46px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
a:hover .main-prd-btn:after {
    opacity: 0;
    filter: Alpha(opacity=0);
    visibility: hidden;
}