how can i customize button like this..?

Issue

A image I designed on Figma:

My attempt:

.pagenumber {
  display: flex;
  width: 252.27px;
  height: 45px;
  justify-content: space-between;
  align-items: center;
  padding: 6.761954261954262% 0 0 37.680647534952171%;
}

button {
  background: none;
  border: none;
}

.no {
  width: 65.750981091687478%;
  padding: 0 12px 0 22.5px;
}

.numbers {
  background: #ffe400;
  border-radius: 50%;
  height: 45px;
  width: 45.24px;
}

.no a {
  color: black;
  font-family: Lobster;
  font-size: 187.5%;
}

<div class="pagenumber">

  <div class="arrowbtn">
    <button type="submit" onclick="history.back(-1)"><i class="fas fa-greater-than fa-flip-horizontal fa-2x" style="color: #ffe400;"></i></button>
  </div>

  <div class="no">
    <button class="numbers"><a href="">1</a></button>
    <button class="numbers"><a href="">2</a></button>
    <button class="numbers"><a href="">3</a></button>
  </div>

  <div class="arrowbtn">
    <button type="submit" method="get" action="/page2"><i class="fas fa-greater-than fa-2x" style="color: #ffe400;"></i></button>
  </div>

</div>

I wanna a page number button like this image but I don't know how to make space between 1,2,3 button. The space between the buttons is 15.08px. If you find some drawback from my code pls notice me.

Solution

Try adding the flex properties to your .no class instead and update the width.

If you're just wanting a simple way to get spacing between your elements just set a desired width without using calc and space-between will do the rest.

If you're looking to get the exact spacing you desire then I recommend using calc to calculate what the width of the parent element should be to fit your required spacing.

My calculation explained:

• Multiply the width of the 3 number elements (45.24px * 3)
• Add that to the multiplication of the exact spacing you want between the number elements (15.08px * 2), in this case multiplying the desired spacing by 2 since you have 3 elements and only require 2 spaces in between.

Note that if you use the calc method you will have to update the calculation each time you update the number of elements you want to display.

.pagenumber {
  display: flex;
  width: 252.27px;
  height: 45px;
  justify-content: space-between;
  align-items: center;
  padding: 6.761954261954262% 0 0 37.680647534952171%;
}

button {
  background: none;
  border: none;
}

.no {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(45.24px * 3 + 15.08px * 2);
  padding: 0 12px;
}

.numbers {
  background: #ffe400;
  border-radius: 50%;
  height: 45px;
  width: 45.24px;
}

.no a {
  color: black;
  font-family: Lobster;
  font-size: 187.5%;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<div class="pagenumber">

  <div class="arrowbtn">
    <button type="submit" onclick="history.back(-1)"><i class="fas fa-greater-than fa-flip-horizontal fa-2x" style="color: #ffe400;"></i></button>
  </div>

  <div class="no">
    <button class="numbers"><a href="">1</a></button>
    <button class="numbers"><a href="">2</a></button>
    <button class="numbers"><a href="">3</a></button>
  </div>

  <div class="arrowbtn">
    <button type="submit" method="get" action="/page2"><i class="fas fa-greater-than fa-2x" style="color: #ffe400;"></i></button>
  </div>

</div>

Answered By - Sergio Estrada