Interacción de precios (HTML, CSS y JS)

Abrir en el editor Publica tu código

Recomendado

23 July 2025

Plantilla de página de destino HTML con animaciones

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

Interacción de precios (HTML, CSS y JS)

Recomendado

Página de inicio de sesión

Un código de Mete

Plantilla de página de destino HTML con animaciones

HTML

CSS

JS

Recomendado

Página de inicio de sesión

Un código de Mete

Plantilla de página de destino HTML con animaciones

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS