Currently, my layout looks like this: https://ibb.co/iqaOXS
However, I would like it to look more like this: https://ibb.co/eDkCRn
The issue I'm facing is that the buttons are extending beyond the circular border. How can I prevent this from happening and keep them within the circle?
If possible, I would prefer a solution using CSS and HTML only, but I am open to any suggestions!
Here is the code I have so far:
#one {
border: 2px solid black;
border-radius: 50%;
height: 90px;
width: 90px;
}
#unu {
overflow: auto;
position: absolute;
top: 20px;
height: 60px;
width: 80px;
border: 2px solid transparent;
}
button {
width: 65px;
height: 40px;
}<div id="one">
<hr style="width: 60px;">
<hr style="position: absolute; left: 15px; top: 74px; width: 70px;" >
<div id="unu">
<button>
<p>
ONE
</p>
</button>
<button>
<p>
TWO
</p>
</button>
<button>
<p>
THIRD
</p>
</button>
</div>
</div>