My current project involves creating a circular interface with two buttons occupying one-third of its circumference.
The challenge I'm facing lies in aligning the height of the buttons perfectly within the parent circle.
Here's a glimpse at the HTML structure:
<div class="circle">
<button class="button one"> Play </button>
<button class="button two"> Pause </button>
</div>
And here's a snippet of the CSS involved:
.circle {
width: 300px;
height: 300px;
border: 10px solid black;
border-radius: 100%;
position: relative;
}
.button {
position: absolute;
width: 145px;
height: 100px;
/* Attempts to adjust z-index affected clickability */
/* z-index: -1; */
}
.one {
bottom: 0;
left: 5px;
border-radius: 0 0 0 100%;
/* Tried hiding excess with added black border */
/* border-left: 5px solid black */
}
.two {
bottom: 0;
right: 5px;
border-radius: 0 0 100%;
/* Added black borders for overlay issues*/
/* border-right: 5px solid black; */
}
I've experimented with adjusting the height and adding borders, but perfect alignment still eludes me. The last resort was introducing a z-index property, which resolved the visual issue, albeit rendering the buttons unclickable.
If you have any suggestions on achieving that elusive perfection, your input would be greatly appreciated!