No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Estilos del bot贸n

17/26
Recursos

Aportes 41

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 馃槃

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 鈥淟eer 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 鈥淎lt鈥 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!!!

Aprendiendo cosas nuevas d铆a a d铆a.

猸愨瓙猸愨瓙猸
Excelente Profesor, todo muy bien explicado!

genial