Oval buttons with border-radius 50%

April 24, 2022

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:

this

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>