JSFiddle - React, Tailwind, and code Playground

by fabriziosirini

HTML

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

CSS

a:before{
    content: attr(data-icon) ' ';
}
a{
    margin: 30px;
    text-decoration: none;
    display: inline-block;
    padding: 10px;
    border: 1px solid rgb(66,66,66);
    border-radius: 10px;
    color: white;
    background: -webkit-linear-gradient(bottom, rgb(66,66,66) 50%, rgb(100,100,100) 50%);
    -webkit-transition: border-radius 0.4s;
}

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


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