JSFiddle - React, Tailwind, and code Playground

by Misha Drobot

HTML

<div><span>+</span> добавить</div>

CSS

div {
  font-size:24px;
position:relative;
height:50px;
display:flex;
align-items:center;
width:160px;
}
span {
  color:gold;
  display:block;
  width:50px;
  justify-content:center;
  text-align:center;
  font-weight:bold

}
div:before {
  height:50px;
  background:blue;
  position:absolute;
  opacity:.3;
  width:50px;
  content:"";
  z-index:-1;
  border-radius:50%;
  top:0;
  transition:.4s;
}
div:hover:before {
  width:100%;
  border-radius:20px;
  transition:.4s;
}