Estilos CSS para Botones en Juegos: Diseño de Pantallas Interactivas

Les recomiendo que acabando este curso revisen la escuela de diseño gráfico, les servirá mucho para mejorar sus estilos en CSS 💚 💚 💚

https://platzi.com/diseno-grafico/

Me pasé todo el día haciendo la wea pq quería aportar :3

No es tanto pero ahi voy!

Asi va el mio

Así va el mio, hice mis propios diseños para las mascotas que mejorare después con el curso de illustrator😊

Hola Platzi!
Asi va mi web de inicio, con botón desactivado hasta que selecciones alguna mascota…

Aca les dejo una imagen con los 3 estados de mis inputs, normal, :hover y checked… y el botón ya activo para continuar.
Me encanta este curso, Saludos!

Que buen ojo para los estilos, tengo que trabajar duro para desarrollar ese buen ojo o gusto, yo no puedo hacer nada de esto sin un diseño pre-definido, excelente ver como va haciendo cada cosa y va teniendo sentido y se ve tan cool.

💅

Reto Cumplido.

En el css de los botones pueden usar esta opcion para que les salga la manito del click:
cursor: pointer;

hola

Así voy! No he podido centrarlos bien con

justify-content: center;

, si alguien me da recomendación les agradecería.

Espero les guste!

Yo, HTML siempre he sido mejor amigo de JavaScript. Nunca habías tenido problemas, éramos nosotros dos.
Hasta que apareció ella.
CSS, la más encantadora. y sin duda los demonios están hechos para pecar con los ángeles.

yo aquí casual, tratando de darle romance a esto 🤣🤣🤣

Juegazo

Muy contento con el resultado hasta ahora.

Un poco old School

Les comparto mi pequeña pantalla.
Acepto recomendaciones. Gracias.

listo profe asi quedo

Adapté un poco el juego para que fuera una extensión de mi emprendimiento!!! poco a poco voy aprendiendo. Le quiero poner unas lógicas distintas pero luego de terminar el proceso del curso!!

Acá esta mi diseño, espero les guste!!

y este es mi código CSS

@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

body{
    margin: 0;
    background-image: url(./imagenes/fondo.jpg);
    background-size: contain;
}
#seleccionar-mascota{
    display: flex;
    flex-direction: column;
    height: 80vh;
    width: 500px;
    justify-content: center;
    align-items: center;
    margin: auto;
    background: #E8AA42;
    margin-top: 60px;
    margin-bottom: 60px;
    border-radius: 12px;
}
.titulo{
    margin-top: -30px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFE5B4;
    width: 450px;
    border: 1px solid #256D85;
    height: 80px ;
    margin-bottom: 68px;
    font-size: 70px;
    font-family: 'Silkscreen', cursive;
}
h2{
    font-family: 'Poppins', sans-serif;
    color:#FFE5B4
}

.contenedor-labels{
    display: flex;
    justify-content: space-between;
    width: 470px;
    height: 150px;
    margin-bottom: 40px;
}
.tarjeta-de-mokepon{
    width: 150px;
    height: 150px;
    background: #256D85;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 300;
    
}
.tarjeta-de-mokepon img{
    width: 110px;
    margin-bottom: 0;
    margin-top: 0;
}
.nombre-mokepon{
    font-family: 'Poppins', sans-serif;
    color: #231955;
    margin-bottom: 0;
    margin-top: 0;
    font-size: 25px;
}
#boton-mascota{
    width: 300px;
    height: 45px;
    color: #FFE5B4;
    background: transparent;
    border-radius: 8px;
    border: 2px solid #256D85;
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    
}
input{
    display: none;
}

 

Le hice unos pequeños cambios al botón:

#boton-mascota{
    color: black;
    background-color: #F7FF93;
    width: 210px;
    height: 45px;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 40px;
    border-radius: 20px;
    border: 1px solid white;
    font-family: 'Press Start 2P', cursive;
}

Para ser una clase va demasiado rapido. Cuesta demasiado entender asi.

Asi me va quedando, la verdad que me emociona

Mi aporte!

Agregué unas propiedades a mi código para los botones. Se las comparto con su significado (todavía no defino los colores, pero lo hice como ejercicio y ustedes pueden modificarlo).

#boton-mascota {
    width: 144px;
    height: 52px;
    border-radius: 20px;
    border: none;
    background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 16px;
    margin-top: 30px;
    cursor: pointer;
}

input {
    display: none;
}

.tarjeta-de-michipon:active {
    box-shadow: 10px 10px 10px #389e8d;
}

• La propiedad cursor: pointer; permite que al mover el cursos salga la manita.
• La propiedad background-image: linear-gradient(135deg, #f34079 40%, #fc894d) permite que el color del botón se degrade.
• La propiedad font-weight: permite hacer la letra negrita.
• La función .tarjeta-de-michipon:active permite que al seleccionar la tarjeta aparezca, en este caso, la sombra del color indicado, con las medidas indicadas.

Esta es mi versión de Mokepon 😃

Puede parecer una tontería pero me cerró una idea que tengo hace meses ahí dando vueltas cuando explicó lo d los margins en sentido de las agujas del reloj, gracias profe.
Tambien, si definimos 2 valores por ejemplo:
margin: 30px 10px; el primer valor cuenta para top y bottom y el segundo para left y right. Si definimos 3 valores el primero va para top el segundo para left y right y el tercero para bottom.

Asi me quedó…

@import url('https://fonts.googleapis.com/css2?family=Belanosima&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Manrope:wght@200&display=swap');


body {
    background-image: url('./assets/caracas_fondo_6.jpg');
    background-position: top;
    background-size: 1800px 1000px;
    font-family: 'Belanosima', sans-serif;
}

#seleccionar-mascota {
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.titulo {
    color: white;
    font-size: 50px;
}

.subtitulo {
    color: white;
    font-size: 25px;
    font-family: 'Manrope', sans-serif;
}

.tarjetas {
    display: flex;
    gap: 10px;
}


.tarjeta-de-elementos{
    width: 210px;
    height: 250px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid white;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
}

.tarjeta-de-elementos img {
    width: 95px;
}

#boton-mascota {
    width: 200px;
    height: 60px;
    border-radius: 20px;
    color: white;
    margin: 15px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid white;
    font-size: 25px;
    font-family: 'Manrope', sans-serif;
}

input {
    display: none;
}

Así va mi avance , espero les guste

Así va mi jueguito!! Cambia de color cuando pones el mouse sobre la imagen (ejemplo Fenigo)

Aquí les dejo mi aporte lleno de Copyright 🤣

Les comparto un pequeño video de lo que llevo de mi proyecto, los gráficos los realize con aseprite, cuando finalize el proyecto completo subiré el código para compartirlo con ustedes 🤟

Mejor me quedo jiji 😄

Cada vez mejorando 💪

Asi me va quedando 😄

Poco a poco!
va tomando buen aspecto

Bueno, por ahora va quedando asi:

Mi boton inicial se ve asi por que tiene una animacion hover… me gusta como va quedando pero claro mucho por mejorar!!

![](

@import url(‘https://fonts.googleapis.com/css2?family=Roboto&display=swap’);

body {
font-family: ‘Roboto’, sans-serif;
background-color: #FFB84C;
}

.titulo {
color: white;
font-size: 32px;
/* width: 310px;
height: 50px;
background-color: teal; */
}

.subTitulo {
color: white;
}

#seleccionar-mascota {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.tarjetas {

display: flex;
/* background-color: black;
flex-direction: column;

display: inline-block; */

}

label {

display: flex;
justify-content:center;
align-items: center;
width: 174px;
height: 100px;
margin: 20px;
background-color:#F266AB;
border-radius: 20px;
color: white;

}

label img {
width: 60px;

}

Mejor veo todo el módulo css antes de sentirme mal porque hay compañeros en muy otro nivel 😁

Les vengo a mostrar mi proceso quise hacer el mío de temática fantasía

Asi va quedando mi juego 😍😍

Conseguí darle un efecto neón a los botones y las tarjetas, estoy feliz XD

así va quedando mi estilo, quise poner a mi gato como primer personaje y me esta encantando

Espero te sean utis estás imagenes teneindo como referencia lo que explica la maestra.

así vamos!!!

Deberia haber elegido diferentes avatares, para que cada uno ataque con diferentes elementos, pero pues aja.

South Park enjoyers 😄

Va mejorando:

Apenas soy un novato en este mundo pero me siento conteto al ver los pequeños resultados😊

Me gusta mucho como la profe Estefany explica paso a paso cada detalle, se entiende fácilmente

Estoy siguiendo tal cual, pero, mi código en HTML, esta raro, pero si funciona, tal cual como usted realizo. Gracias profe