BOTON 1
<style>
#boton1{background:#cd2653;height:50px;width:150px;border:none;color:#eee;position:relative;transition:1s;display:flex;align-items:center;justify-content:center;cursor:pointer}
#boton1 #circle{width:5px;height:5px;background:transparent;border-radius:50%;position:absolute;top:0;left:50%;overflow:hidden;transition:500ms}
#boton1:hover{background:#000}
#boton1:hover #circle{height:50px;width:150px;left:0;border-radius:0;border-bottom:2px solid #cd2653}
</style>
<div id="boton1">BOTON 1<div id="circle"></div></div>