JSFiddle - React, Tailwind, and code Playground

by Mariagrazia_Lunghi

HTML

<script src="&lt;link href=&#39;http://fonts.googleapis.com/css?family=Finger+Paint&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<script src="&lt;link href=http://fonts.googleapis.com/css?family=Finger+Paint rel=stylesheet type=text/css&gt;"></script>
<!-- <link href='http://fonts.googleapis.com/css?family=Finger+Paint' rel='stylesheet' type='text/css'>
<p>
HELLO WORLD
    </p>-->
<a href="#" data-icon="★">scopri di più</a>

CSS

/*p{
   font-family:'Finger Paint'; 
}*/
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:0px;
    color:white;
    background:-webkit-linear-gradient(bottom, 
        rgb(66,66,66) 50%,
        rgb(100,100,100) 50% );
    box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
}

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

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