Interazione dei prezzi (HTML, CSS e JS)

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

18 February 2025

Sito Web HTML Portfolio con Menu Laterale

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

Interazione dei prezzi (HTML, CSS e JS)

Consigliato

CodePen Home San Valentino

Lancia una moneta

Sito Web HTML Portfolio con Menu Laterale

HTML

CSS

JS

Consigliato

CodePen Home San Valentino

Lancia una moneta

Sito Web HTML Portfolio con Menu Laterale

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS