how to change button arrow icon position in css?

Kiki 0
Viewed 49

Excuse me, I want to ask, how do I make the position of the arrow button in the image that I circled can be opposite and its position is the same as in Figure 1? Code:

<button class="pre-btn"><img src="button/arrow-removebg-preview.png" alt=""></button>
<button class="nxt-btn"><img src="button/arrow-removebg-preview.png" alt=""></button>




.pre-btn,
.next-btn{
    margin: 0;
    padding: 0;
    border: none;
    width: 10 ;
    height: 100%;
    position:absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg rgba(255, 255, 255, 0),0% #fff 100% );
    cursor: pointer;
    z-index: 9;
  }

.pre-btn{
    left: 0;
    transform:rotate(180deg);
} 
.next-btn{
    right: 0;
}

enter image description here enter image description here

css html
1 Answers

If you want to center a arrow by position: absolute. One option is to add a transform: translate.

It means:

Vertical

position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%)

Horizontal

position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%)

Center

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)

Something like this:

.pre-btn,
.next-btn{
   
    z-index: 9;
  }
.btn-container {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
}
<div class='btn-container'>
  <button class="pre-btn"><img src="button/arrow-removebg-preview.png" alt="">S</button>
<button class="nxt-btn"><img src="button/arrow-removebg-preview.png" alt="">S</button>
</div>

Jakub Štellner0
Related