Interaction de tarification (HTML, CSS et JS)

1,972 zegarkidawida

Ouvrir dans l'éditeur Publiez votre code

Interaction de tarification (HTML, CSS et JS)

Recommandé

17 April 2025

Un code de Metehan

16 February 2024

Défilement infini de tags

25 June 2026

Pièce de monnaie Strike TikTok

HTML

<div class="container">
        <div class="inner_container">
            <div class="btn">
                <span class="active_bg" style="left: 8px;"></span>
                <span class="pricing_btn monthly active" data-class="pricing1">Monthly</span>
                <span class="pricing_btn yearly" data-class="pricing2">Yearly</span>
            </div>
            <div class="pricing pricing1 active">
                <div class="payment monthly active">
                    <div class="free">
                        <h2>Free</h2>
                        <span class="money">$0.00 <span>/month</span></span>
                    </div>
                    <span class="select_icon monthly_icon active"></span>
                </div>
                <div class="payment monthly">
                    <div class="free">
                        <h2>Starter <span>Popular</span></h2>
                        <span class="money">$7.49 <span>/month</span></span>
                    </div>
                    <span class="select_icon monthly_icon"></span>
                </div>
                <div class="payment monthly">
                    <div class="free">
                        <h2>Pro</h2>
                        <span class="money">$11.49 <span>/month</span></span>
                    </div>
                    <span class="select_icon monthly_icon "></span>
                </div>
            </div>
            <div class="pricing pricing2">
                <div class="payment yearly active">
                    <div class="free">
                        <h2>Free</h2>
                        <span class="money">$0.00 <span>/month</span></span>
                    </div>
                    <span class="select_icon yearly_icon active"></span>
                </div>
                <div class="payment yearly">
                    <div class="free">
                        <h2>Starter <span>Popular</span></h2>
                        <span class="money">$9.99 <span>/month</span></span>
                    </div>
                    <span class="select_icon yearly_icon"></span>
                </div>
                <div class="payment yearly">
                    <div class="free">
                        <h2>Pro</h2>
                        <span class="money">$19.99 <span>/month</span></span>
                    </div>
                    <span class="select_icon yearly_icon"></span>
                </div>
            </div>
            <button class="action_btn">Get Started</button>
        </div>
    </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{
    margin: 0px;
    font-family: "Poppins", serif;
    background:#000;
}
.container{
    position: relative;
    max-width: 700px;
    width: 100%;
    margin: 0px auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.inner_container{
    position: relative;
    max-width: 400px;
    width: 100%;
    padding: 15px;
    border:2px solid #EAEAE9;
    border-radius: 25px;
    box-sizing: border-box;
    background:#fff;
}
.btn{
    position: relative;
    max-width: 100%;
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
    background: #F4F3F8;
    border-radius: 30px;
    text-align: center;
    cursor: pointer;
    display: flex;
}
.active_bg {
    position: absolute;
    height: calc(100% - 12px);
    background: #fff;
    border-radius: 25px;
    transition: all .3s linear;
    width: calc(50% - 6px);
}
.pricing_btn{
    position: relative;
    display: inline-block;
    padding: 5px 15px;
    font-size: 17px;
    box-sizing: border-box;
    font-weight: 600;
    transition: all .3s linear;
    text-align: center;
    max-width: 50%;
    width: 100%;
    box-sizing: border-box;
}
.pricing{
    position: relative;
    margin-top: 20px;
    display: none;
}
.pricing.active{
    display: block;
}
.payment{
    position: relative;
    padding: 15px;
    border: 2px solid #F3F3F2;
    box-sizing: border-box;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all .3s linear;
}
.payment.active{
    border:2px solid #000;
}
.free h2{
    position: relative;
    margin: 0px;
    margin-bottom: 3px;
    font-weight: 500;
    font-size: 20px;
}
h2 span{
    position: relative;
    display: inline-block;
    font-size: 14px;
    background: #F2EBB9;
    padding: 6px 10px;
    border-radius: 5px;
    font-weight: normal;
}
.money{
    position: relative;
    display: block;
    font-size: 17px;
    font-weight: 500;
}
.money span{
    position: relative;
    display: inline-block;
    font-weight: normal;
    color: #838388;
}
.select_icon{
    position: relative;
    width: 20px;
    height: 20px;
    border:2px solid #838388;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.select_icon.active{
    background: #000;
    border:2px solid #000;

}
.select_icon.active::after{
    position: absolute;
    content: "";
    width: 2px;
    height: 6px;
    background: #fff;
    transform: rotate(130deg);
    left: 5px;
    top: 10px;
}
.select_icon.active::before{
    position: absolute;
    content: "";
    width: 2px;
    height: 13px;
    background: #fff;
    transform: rotate(43deg);
    left: 11px;
    top: 4px;
}
.action_btn{
    position: relative;
    max-width: 100%;
    width: 100%;
    padding: 12px;
    border-radius: 25px;
    border: 0;
    background: #000;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

@media(max-width:768px){
    .container{
        max-width: 90%;
    }
}

const pricing_btn = document.querySelectorAll(".pricing_btn ");
const active_bg = document.querySelector(".active_bg");
const pricing = document.querySelectorAll(".pricing");
const payment = document.querySelectorAll(".payment ");
const monthly = document.querySelectorAll(".monthly");
const yearly = document.querySelectorAll(".yearly");
const monthly_icon = document.querySelectorAll(".monthly_icon");
const yearly_icon = document.querySelectorAll(".yearly_icon");

pricing_btn.forEach(function(btn){
    btn.addEventListener("click",function(){
        pricing_btn.forEach(btn => btn.classList.remove("active"));
        this.classList.add("active");
        // var active_width = this.offsetWidth;
        var active_left = this.offsetLeft;
        active_bg.style.cssText = "left:" +active_left+ "px;";
        var class_name = this.getAttribute("data-class");
        pricing.forEach(function(c){
            c.classList.remove("active");
        });
        document.querySelector("." + class_name).classList.add("active");
    });
});

payment.forEach(function(payment_btn){
    payment_btn.addEventListener("click",function(){

if(this.classList.contains("monthly")){
            monthly.forEach(payment_btn => payment_btn.classList.remove("active"));
            this.classList.add("active");
            monthly_icon.forEach(select_icon=> select_icon.classList.remove("active"));
            this.querySelector(".select_icon").classList.add("active");
        }
        if(this.classList.contains("yearly")){
            yearly.forEach(payment_btn => payment_btn.classList.remove("active"));
            this.classList.add("active");
            yearly_icon.forEach(select_icon=> select_icon.classList.remove("active"));
            this.querySelector(".select_icon").classList.add("active");
        }
    });
});