COMO AGREGAR ESTILOS CON CSS EN WIX STUDIO | TUTORIAL | FACIL

En este vídeo agregarémos CSS a nuestro sitio de Wix Studio. Usarémos clases de css y código en Velo para aplicar lógica y cambiar los estilos de nuestros elementos según algunas condiciones.

Este tutorial te ayudará a agregar estilos css en tu sitio de Wix Studio

---

global.css

.animationRed .rich-text__text{
    color: red;
    font-size: 100px;
}
.animationYellow .rich-text__text{
    color: yellow;
    font-size: 150px;
}

/*Degradado animado*/
.animated-text .rich-text__text{
    font-size: 4rem;
    font-weight: bold;
    background: linear-gradient(90deg, #ff6b6b, #556270, #ff6b6b);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-animation 3s infinite linear;
}

@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/*Botón con efecto hover*/
.custom-button {
    background: linear-gradient(45deg, #ff6b6b, #556270);
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

.custom-button:hover {
    background: linear-gradient(45deg, #556270, #ff6b6b);
    transform: scale(1.1);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

.neon-button {
    font-size: 20px;
    font-weight: bold;
    color: white;
    background: #ff6b6b;
    padding: 15px 30px;
    border-radius: 50px;
    border: 2px solid #fff;
    box-shadow: 0px 0px 10px #ff6b6b;
    transition: box-shadow 0.4s ease-in-out;
}

.neon-button:hover {
    box-shadow: 0px 0px 20px #ff6b6b, 0px 0px 40px #ff6b6b;
}

---

Pagina/Velo

// Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction

$w.onReady(function () {

    let selectedButton = null;
    $w("#repeater1").onItemReady(($item, itemData, index) => {
        $item("#button2").onClick(() => {
            console.log("clicked", index, selectedButton);

            if (index == selectedButton) {
                $item("#button2").customClassList.remove("neon-button");
            } else {
                $item("#button2").customClassList.add("neon-button");
				selectedButton = index;
				removeClass();
            }
        })
    })

	const removeClass = () =>{
		$w("#repeater1").forEachItem(($item, itemData, index) => {
			if(index != selectedButton){
                $item("#button2").customClassList.remove("neon-button");
			}
        })
	}

});

#css #wixstudio #tutorial #facil #español #spanish #styles