1

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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Vasi
  • 21
  • 5

1 Answers1

2

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>
Anurag Srivastava
  • 14,077
  • 4
  • 33
  • 43
  • That could be a solution, but i am using a parent div to be able to display them as flex, so, using px is breaking the entire code.. – Vasi Apr 24 '22 at 14:42
  • I'd say that using `padding` doesn't make much sense here, it only makes the size more obscure. Don't use `padding`, just give the container a `width` and `height`, then do the same for the child. – Robo Robok Apr 24 '22 at 14:43
  • @Vasi Edited to include a flex parent – Anurag Srivastava Apr 24 '22 at 14:46