Estilos del botó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 😄

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

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 😉

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.

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

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

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.

Si el texto fuera demasiado largo se veria así:

Mi solución fue agregar una elipsis (…), aparte que la intención es que acceda a leer más
el código queda así

Y el resultado seria:

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

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.

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

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

Así va mi proyecto

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

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!

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!!!

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

genial