so I have this three button I need to find a way any of these two solution
1 - make animation so that each time one button come in front and the two other go to the back
2 - Or when I click on a button it come to the front and the other go to the back

here my code for the style

.index-environement-specialise-boutton-main {
  width: 279px;
  height: 76px;
  border: 1px solid var(--color-text-primary);
  border-radius: 46px;
  text-align: center;
  font-style: normal !important;
  font-variant: normal !important;
  font-weight: bold !important;
  font-size: 32px !important;
  line-height: 34px !important;
  font-family: Poppins !important;
  letter-spacing: 0.5px;
  color: var(--color-text-primary);
  opacity: 1;
  margin-inline: 2.625rem;
  position: relative;
  box-shadow: 0px 0px 222px 150px rgba(193, 186, 243, 0.75);
  -webkit-box-shadow: 0px 0px 222px 150px rgba(193, 186, 243, 0.75);
  -moz-box-shadow: 0px 0px 222px 150px rgba(193, 186, 243, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

.index-environement-specialise-boutton-main.b1 {
  background: #C1BAF3 0% 0% no-repeat padding-box;
}

.index-environement-specialise-boutton-main.b2 {
  background: #F8D6B5 0% 0% no-repeat padding-box;
}

.index-environement-specialise-boutton-main.b3 {
  background: #F3B9C5 0% 0% no-repeat padding-box;
}

.index-environement-specialise-boutton-behind {
  width: 176px;
  height: 48px;
  border: 1px solid var(--color-text-primary);
  border-radius: 46px;
  text-align: center;
  font-style: normal !important;
  font-variant: normal !important;
  font-weight: bold !important;
  font-size: 20px !important;
  line-height: 21px !important;
  font-family: Poppins !important;
  letter-spacing: 0.5px;
  color: var(--color-text-primary);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.index-environement-specialise-boutton-behind.b1 {
  background: #C1BAF3 0% 0% no-repeat padding-box;
}

.index-environement-specialise-boutton-behind.b2 {
  background: #F8D6B5 0% 0% no-repeat padding-box;
}

.index-environement-specialise-boutton-behind.b3 {
  background: #F3B9C5 0% 0% no-repeat padding-box;
}

.index-environement-specialise-boutton-main:hover,
.index-environement-specialise-boutton-behind:hover {
  color: var(--color-text-primary);
}
.index-environement-specialise-col-right{
width:700px;
}

<div >
  <a  
     role="button" 
     href="javascript:void(0)" 
     id="A2" runat="server" title="hôtesses">
    hôtesses
  </a>
  <a  
     role="button" 
     href="javascript:void(0)" 
     id="A3" runat="server" title="sitters">
    sitters
  </a>
  <a  
     role="button" 
     href="javascript:void(0)" id="A4" runat="server" 
     title="vendeurs">
    vendeurs
  </a>
</div>

CodePudding user response：

With some CSS flex positioning, with JS's getBoundingClientRect() Method and some simple math:

// DOM helpers:

const els = (sel, par) => (par || document).querySelectorAll(sel);
const el = (sel, par) => (par || document).querySelector(sel);


// Carousel:

const btnCarousel = (elCarousel) => {

  const move = (evt) => {
    const elButton = evt.target.closest("button");
    if (!elButton) return; // do nothing
    const elSlider = el(".carousel-slider", elCarousel);

    const bcrButton = elButton.getBoundingClientRect();
    const bcrCarousel = elCarousel.getBoundingClientRect();
    const bcrSlider = elSlider.getBoundingClientRect();

    const centerCarousel = bcrCarousel.width / 2;
    const centerButton = bcrButton.width / 2;
    const xButton = bcrButton.left;
    const xSlider = bcrSlider.left;

    const x = centerCarousel - xButton - centerButton   xSlider;

    elSlider.style.translate = `${x}px 0`;
  };

  elCarousel.addEventListener("click", move);
};

els(".carousel").forEach(btnCarousel);

.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-slider {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  gap: 1rem;
  transition: 0.5s;
}

<div >
  <div >
    <button type="button">1 Button</button>
    <button type="button">2 Btn</button>
    <button type="button">3 Button longer text</button>
  </div>
</div>

<div >
  <div >
    <button type="button">1 Super Button</button>
    <button type="button">2 Some Button</button>
    <button type="button">3</button>
  </div>
</div>

CodePudding user response：

just add or remove a class that sets the scale of each button on and off on click or even mouseenter and mouseleave

var buttons = document.querySelectorAll(".btn");

buttons.forEach(function(button) {
  button.addEventListener("mouseenter", function() {
    buttons.forEach(button => button.classList.remove("active"));
    button.classList.add("active")
  })
  button.addEventListener("mouseleave", function() {
    buttons.forEach(button => button.classList.remove("active"));
  })
})

.btn {
  cursor: pointer;
  border: 1px solid black;
  padding: 20px;
  margin: 20px;
  transition: 500ms;
}

.active {
  transform: scale(1.5);
}

<button >button</button>
<button >button</button>
<button >button</button>