Interaction de tarification (HTML, CSS et JS)

1,851 zegarkidawida

Ouvrir dans l'éditeur Publiez votre code

Interaction de tarification (HTML, CSS et JS)

Recommandé

22 June 2025

Exemple de formulaire de connexion HTML

2 April 2026

GN-Math : Jeux débloqués, recherche, tri et zones de jeu

3 June 2025

Lecteur vidéo brutaliste

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");
        }
    });
});