Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Estilos del botón

17/26
Recursos

Aportes 38

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Podemos agregar un hover para mejorar el diseño:

.blogs-button:hover {
	border: 1px solid white;
	color: white;
	background-color: #48CFAD;
}```

Les recomiendo mucho este plugin para vscode, el cual permite auto completar el nombre de las clases en el css
https://marketplace.visualstudio.com/items?itemName=solnurkarim.html-to-css-autocompletion

ctrl + d = seleccionar texto igual 😄

Cuando quieran seleccionar múltiples líneas idénticas en el editor para editarlas al tiempo, puedes usar CTRL + D mientras estás sobre una de esas líneas para irlas seleccionando y así editarlas por igual 😉

Recomiendo guardar los colores en variables, por ejemplo de esta manera:
.
Al comienzo de main.css:

:root {
  --color-green: #47cfac;
  --color-light-green: #88d6c3;
  --color-white: whitesmoke;
  --color-grey: rgb(223, 221, 221);
}

Al momento de copiar y escribir “Leer más” podrías haber seleccionado la etiqueta completa y darle control+d, 5 veces y reemplazar.
Solo es una sugerencia.

También es recomendable asignarle una variable a los colores mas usados. Sugerencia claro ❕

Les comparto este articulo para configurar botones:
https://fvsch.com/styling-buttons
Espero les sirva de ayuda.

En los comentarios se encuentra oro puro haha 😄

Con “Alt” pueden hacer multiseleccion para que hagan todo al mismo tiempo

Me alegro que se dió cuenta (aunque un poco tarde) que tendría que haber cargado los textos, pero simplemente por el tema de copiar y pegar que le roba tiempo innecesario, no porque era difícil visualizar la idea ya armada.

grande diego

  • Información acerca de web componentes, podemos crear nuestros propios elementos e insertarlos dinámicamente en nuestros proyectos: https://www.webcomponents.org/

Me gusta mucho el diseño de este blog, veré que puedo mejorar al terminar el proyecto

Comparto mi avance la maquetacion la asigancion de clases y demas lo hice completamente diferente solo para recordarles que no existe una unica forma de llegar a un resultado igual o parecido.



Buenas, al aplicar los estilos de los botones, los de la sección de los artículos me salen con ese efecto como si estuvieran pegados ¿Qué puede estar pasando? He intentado desde cero la clase y sigue saliendo igual

Yo hice de esta manera agregando un hover con transition, espero que les guste chicos

.blogs__button {
  border: 1px solid #47cfac;
  padding: 10px 15px;
  font-size: 12px;
  transition: all 0.5s ease-out;
}

.blogs__button:hover {
	border: 1px solid white;
	color: white;
	background-color: #48CFAD;
  
}

Buena clase!

excelentes practicas estilo muy minimalista pero genial y dando atributos puntuales en el css, me quito el sombrero

Continuemos! 😄

+2

Muchas gracias por la clase para brindarle los estilos adecuados al botón instructor Diego.

va muy bien el proyecto, y me gusta mucho el diseño!

Seguimos!!!

Vamos super bien! 😄 A seguirle!

Creo que depende mucho de los gustos de cada quien en el momento de organizar su código.

Excelente curso!

Excelente clase!!

Esta buena la extensión yo por mi parte escribo div.nombreclase y code lo auto completa

Buena clase, pero creo que ya depende de cada gusto para hacerlo mas propio, o incluso mejorar el diseño.

Sigamos 😄

¡Excelente clase!

Hasta ahora vamos muy bien …

Por semántica no es mejor tener una etiqueta <button> en ves de una <a>, o como funciona mejor???

Genial!!!

Aprendiendo cosas nuevas día a día.

⭐⭐⭐⭐⭐
Excelente Profesor, todo muy bien explicado!

genial