JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a class="red" href="#">bouton 1<span></span></a></li>
    <li><a class="green" href="#">bouton 2<span></span></a></li>
    <li><a class="blue" href="#">bouton 3<span></span></a></li>
</ul>

CSS

li {margin:5px;list-style-type:none;}
a {display:block;width:150px;height:20px;position:relative;background:#CCC;}
a span{display:block;width:20px;height:20px;position:absolute;top:0;right:0;}
a:hover { z-index: 1; }
a:hover span {width:40px;height:40px;top:-10px;right:-10px;}
a.red span {background:#F00;}
a.green span {background:#0F0;}
a.blue span {background:#00F;}