1 - Espaciado y tamaño de los botones Objetivo: Alinear botones horizontalmente y ajustar su tamaño y espaciado. CSS: css Copiar código .boton { display: inline-block; /* Asegura que los botones se alineen horizontalmente / padding: 10px 20px; / Ajusta el tamaño del botón / margin-right: 15px; / Espaciado entre los botones / font-size: 16px; / Tamaño de la fuente / } .boton:last-child { margin-right: 0; / Elimina el margen derecho del último botón / } 2 - Mejorando la visibilidad de los botones Objetivo: Aumentar la accesibilidad y visibilidad de los botones. CSS: css Copiar código .boton { font-size: 18px; / Aumenta el tamaño de la fuente / background-color: #0056b3; / Cambia el color de fondo para mejor contraste / color: #ffffff; / Asegura que el texto sea visible / border: 2px solid #004494; / Añade borde / border-radius: 5px; / Esquinas redondeadas / box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); / Añade sombra para efecto de profundidad / transition: all 0.3s ease; / Añade una transición suave para los efectos / } .boton:hover { background-color: #004494; / Cambia el color de fondo al pasar el ratón / } 3 - Creando una clase común para botones Objetivo: Crear una clase compartida para los botones de "Instagram" y "GitHub". CSS: css Copiar código .boton-social { background-color: #ff5733; / Color de fondo / color: #fff; / Color del texto / font-size: 16px; / Tamaño del texto / border-radius: 8px; / Esquinas redondeadas / padding: 10px 20px; / Espaciado interno / text-decoration: none; / Elimina el subrayado / } 4 - Ajustando el espaciado interno de los botones Objetivo: Usar padding para ajustar el espaciado interno. CSS: css Copiar código .boton { padding: 15px 30px; / Aumenta el espacio entre el texto y los bordes del botón / } 5 - Importando y aplicando la fuente correcta Objetivo: Importar y aplicar la fuente Montserrat. CSS: css Copiar código / Importa la fuente Montserrat con el peso 600 */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
.boton { font-family: 'Montserrat', sans-serif; /* Aplica la fuente / font-weight: 600; / Asegura que el peso de la fuente sea 600 / text-decoration: none; / Elimina el subrayado predeterminado / color: #333; / Ajusta el color del texto */ }
