JSFiddle - React, Tailwind, and code Playground

by thecoz21

HTML

<a href="" data-icon="★">scopri di più</a>

CSS

a:before{
content:attr(data-icon)' ';
}

a{
text-decoration : none;
display:inline-block;
padding:10px;
border:1px solid rgb(66,66,66);
border-radius:15px;
margin:10px;
color:#fff;
box-shadow: 0px 0px 6px rgba(0,0,0,0.7); 
background: -webkit-linear-gradient(bottom,rgb(50,50,50)50%,rgb(100,100,100)50%);
    -webkit-transition:border-radius 0.4s;
}

a:active, a:hover{
    border-radius:0px;
}

a:active{
  box-shadow: 0px 0px 15px rgba(0,0,0,0.7); 
background: -webkit-linear-gradient(bottom,rgb(100,100,100)50%,rgb(50,50,50)50%);
}