मूल्य निर्धारण इंटरैक्शन (HTML, CSS और JS)

1068 zegarkidawida

संपादक में खोलें अपना कोड प्रकाशित करें

मूल्य निर्धारण इंटरैक्शन (HTML, CSS और JS)

अनुशंसित

21 July 2025

3D लॉगिन साइनअप बॉक्स HTML CSS डिज़ाइन

12 September 2025

छवि स्लाइडर HTML CSS जावास्क्रिप्ट

10 July 2025

CSS एनिमेटेड लोडिंग स्क्रीन HTML उदाहरण

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%;
    }
}

JS

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

अनुशंसित

3D लॉगिन साइनअप बॉक्स HTML CSS डिज़ाइन

छवि स्लाइडर HTML CSS जावास्क्रिप्ट

CSS एनिमेटेड लोडिंग स्क्रीन HTML उदाहरण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS