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;position:relative;z-index:1;}
a {display:block;width:150px;height:20px;position:relative;background:#CCC;z-index:2;}
a span{display:block;width:20px;height:20px;position:absolute;top:0;right:0;z-index:3;}
a:hover span {width:40px;height:40px;top:-10px;right:-10px;z-index:4;}
a.red span {background:#F00;}
a.green span {background:#0F0;}
a.blue span {background:#00F;}