i’m trying to achieve a round button style, but because of the content within the button i keep getting an oval shape, like inside the picture:
Maybe i got the wrong idea and the content is not the problem, I’m looking for ideas 🙂
.ratingButton {
position: relative;
border: none;
font-size: 18px;
color: hsl(217, 12%, 63%);
margin: 0 18px;
background-color: hsla(216, 12%, 54%, 0.2);
padding: 1em;
border-radius: 50%; //tried w/ 50%, 100%, 100vh/vw, nothing seem to work.
}<button class="ratingButton" id="fifth">5</button>>Solution :
You can set a height and width, and modify padding accordingly.
Setting them as children of a flexbox is still possible with a desired layout:
.parent {
width: 500px;
outline: 1px solid salmon;
display: flex;
justify-content: space-between;
align-items: center;
}
.ratingButton {
position: relative;
border: none;
font-size: 18px;
color: hsl(217, 12%, 63%);
background-color: hsla(216, 12%, 54%, 0.2);
padding: .75em;
border-radius: 50%;
height: 50px;
width: 50px;
}<div class="parent">
<button class="ratingButton" id="1">1</button>
<button class="ratingButton" id="2">2</button>
<button class="ratingButton" id="3">3</button>
<button class="ratingButton" id="4">4</button>
<button class="ratingButton" id="5">5</button>
</div>