Animate item to center on click - css

Question

so I have this three button I need to find a way any of these two solution
make animation so that each time one button come in front and the
two other go to the back
or, when I click on a button it come to the front and the other go to the back
here is 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 class="w-100 index-environement-specialise-col-right">
<a class="index-environement-specialise-boutton-behind b2"
role="button"
href="javascript:void(0)"
id="A2" runat="server" title="hôtesses">
hôtesses
</a>
<a class="index-environement-specialise-boutton-main b1"
role="button"
href="javascript:void(0)"
id="A3" runat="server" title="sitters">
sitters
</a>
<a class="index-environement-specialise-boutton-behind b3"
role="button"
href="javascript:void(0)" id="A4" runat="server"
title="vendeurs">
vendeurs
</a>
</div>

Answer 1

With some CSS flex positioning, with JS's getBoundingClientRect() method and some simple math — animate the buttons wrapper using CSS3 transition and transform (inside a .carousel container) by the center point of each button item in relation to the horizontal center of the carousel:
// 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 class="carousel">
<div class="carousel-slider">
<button type="button">1 Button</button>
<button type="button">2 Btn</button>
<button type="button">3 Button longer text</button>
</div>
</div>
<div class="carousel">
<div class="carousel-slider">
<button type="button">1 Super Button</button>
<button type="button">2 Some Button</button>
<button type="button">3</button>
</div>
</div>
Add a .is-active on click, some more styles, a CSS transition-origin to the button's center-top and you're almost done:
// DOM helpers:
const els = (sel, par) => (par || document).querySelectorAll(sel);
const el = (sel, par) => (par || document).querySelector(sel);
// Carousel:
const btnCarousel = (elCarousel) => {
const elButtons = els("button", 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`;
elButtons.forEach(el => el.classList.remove("is-active"));
elButton.classList.add("is-active");
};
elCarousel.addEventListener("click", move);
};
els(".carousel").forEach(btnCarousel);
/* QuickReset*/
*,
::before,
::after {
margin: 0;
box-sizing: border-box;
}
body {
font: 16px/1.5 sans-serif;
background: linear-gradient(90deg, rgba(244, 246, 255, 1) 0%, rgba(213, 208, 247, 1) 50%, rgba(244, 246, 255, 1) 100%);
}
.carousel {
position: relative;
overflow: hidden;
padding: 4rem 0;
}
.carousel-slider {
display: flex;
margin: 0 auto;
justify-content: center;
gap: 4rem;
transition: 0.5s;
}
.btn {
border: 0.1rem solid #455171;
padding: 0.4em 2.6em;
font-weight: 900;
font-size: 1rem;
border-radius: 2em;
cursor: pointer;
}
.carousel .btn {
transform-origin: center top;
transition: 0.5s;
}
.carousel .btn.is-active {
scale: 1.4;
}
.bg-1 {
background-color: #ecb9cc;
}
.bg-2 {
background-color: #c1baf3;
}
.bg-3 {
background-color: #f0d2be;
}
<div class="carousel">
<div class="carousel-slider">
<button type="button" class="btn bg-1">Hôtesses</button>
<button type="button" class="btn bg-2 is-active">Sitters</button>
<button type="button" class="btn bg-3">Vendeurs</button>
</div>
</div>