Small circle div - CSS

Question

I'm trying to make the divs round as much as possible. however it should be "small", without having to increase width and height to 100px.

image of my calcualtor

here is the code:

.contas div {
    color: white;
    display: inline-block;
    border: 0;
    width: 40px;
    border-radius: 100%;
    text-align: center;
    padding: 10px;
    margin: 20px 4px 10px 1px;
    cursor: pointer;
    background-color: #202020;
    transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

Answer 1

If you really want to get a circle, you need an equal amount of height and width on your div. That way you get a square. Then you add a border-radius of 50% for the perfect circle. You're less likely to get a perfect circle if the height and width of the div are not the same.

Answer 2

Use for buttons display:inline-flex; and border-radius: 50%;

here is code HTML:

<aricle class="contas">
  <!-- row 0 -->
    <input class="contas__head" placeholder="0" type="text" />
  <!-- row 1 -->
  <button class="contas__btn">C</button>
  <button class="contas__btn">()</button>
  <button class="contas__btn">%</button>
  <button class="contas__btn">/</button>
  <!-- row 2 -->
  <button class="contas__btn">7</button>
  <button class="contas__btn">8</button>
  <button class="contas__btn">9</button>
  <button class="contas__btn">*</button>

  <!-- row 3 -->
  <button class="contas__btn">4</button>
  <button class="contas__btn">5</button>
  <button class="contas__btn">6</button>
  <button class="contas__btn">-</button>


  <!-- row 4 -->
  <button class="contas__btn">1</button>
  <button class="contas__btn">2</button>
  <button class="contas__btn">3</button>
  <button class="contas__btn">+</button>

  <!-- row 5 -->
  <button class="contas__btn">+/-</button>
  <button class="contas__btn">0</button>
  <button class="contas__btn">.</button>
  <button class="contas__btn">=</button>
</aricle>

here is code SCSS:

$contas-color: #f2f2f2;
$contas-fill: #000000;
$contas-fill-light:#202020;
$contas-radius: 1rem;
$contas-space: 0.75rem;
$contas-field-size: 4rem;
$contas-btn-size: var(--contas-btn-size, 2.5rem);
$contas-btn-hover-fill: #ff810f;


body {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 100vh;

  padding: 1.5rem;
  background-color: $contas-color;
}

.contas {
  position: relative;

  display: grid;
  grid-gap: 0.8rem 0.5rem;
  grid-template-columns: repeat(4, $contas-btn-size);
  justify-content: center;
  align-items: center;

  width: 12.5rem;
  padding: calc(#{ $contas-field-size + ($contas-space* 1.5)}) $contas-space ($contas-space* 1.5) ;

  background-color: $contas-fill;
  border-radius: $contas-radius;

  overflow: hidden;

  &__head { 
    position: absolute;
    inset: 0 0 auto;

    min-height: $contas-field-size;

    padding:  0 ($contas-space*1.5);

    font-size: 1.5rem;
    font-weight: 500;
    text-align:right;
    color:$contas-color;

    border: unset;
    user-select: none;
    background: $contas-fill-light;  

    pointer-events:none;

    &:focus, &:active, &:hover {
      color:$contas-color;
      outline: none;
      box-shadow: none;
    } 
  }

  &__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: white;

    width: $contas-btn-size;
    aspect-ratio: 1 / 1;

    text-align: center;

    border-radius: 50%; 
    border: unset;
    background-color: $contas-fill-light;

    transition: .3s lianer;
    transition-property: background-color, box-shadow, transform;

    cursor: pointer;

    &:hover, &:active{
       background-color: $contas-btn-hover-fill;
    }

     &:active{
       transform: scale(1.15);
    }
  }
}

see https://jsfiddle.net/d4htsLgb/2/

Answer 3

You can fix it using pixels instead of percents:

.contas .div {
border-radius: 99999px;
}