Estilización de Botones y Texto en HTML y CSS

Clase 12 de 26 • Curso Práctico de Maquetación en CSS

Resumen

¿Cómo estilizar nuestro proyecto final?

Transformar el diseño de una página web implica un gran número de detalles, comenzando con la correcta elección de colores y dimensiones hasta los estilos tipográficos. En este contenido, exploraremos los pasos finales para dar un acabado profesional al área Home de nuestro proyecto, enfocándonos en la importancia de los estilos CSS y cómo implementarlos eficazmente.

¿Cómo lograr una presentación visual óptima?

Comencemos por personalizar elementos clave como el título y los botones. Estos pasos asegurarán que tu proyecto capte la atención del usuario desde el primer momento:

Título: Cambiaremos el color del texto del título a blanco usando CSS para darle un mayor contraste y elegancia. Para ello, simplemente aplica color: white; a la clase correspondiente.

Botón: Asegúrate de que el botón no solo sea funcional sino también visualmente atractivo. Definiremos las dimensiones y color del botón con:

.home-button {
    width: 110px;
    height: 50px;
    background-color: #color_correcto;
    display: flex;
    align-items: center;
    justify-content: center;
}

Estilo del texto del botón: El texto dentro del botón recibirá atención especial con un espaciado de fuente adecuado y un tamaño que garantice legibilidad:
```
.home-button a {
    font-weight: 700;
    font-size: 18px;
}
```

Asegúrate de verificar estos valores con los estilos del diseño inicial para mantener la coherencia visual.

¿Cómo garantizar la cohesión tipográfica?

La selección de la tipografía correcta es crucial para transmitir la personalidad y el estilo de tu página. En nuestro proyecto, utilizamos fuentes específicas para garantizar una apariencia uniforme y profesional:

Fuentes del proyecto: Hemos integrado 'Roboto', una fuente versátil que se adapta bien a diferentes contextos y resoluciones. Es una buena práctica declarar estas fuentes al inicio del código CSS para garantizar uniformidad en todas las páginas del proyecto.
```
body {
    font-family: 'Roboto', sans-serif;
}
```

Este tipo de declaración asegura que cada elemento textual en la página sea renderizado de acuerdo con las intenciones de diseño originales.

¿Cómo proceder al siguiente desafío?

Con estos últimos detalles visuales completados, estamos listos para avanzar al siguiente reto: diseñar el layout de nuestro blog en HTML. Esto incluye entender cómo estructurar efectivamente el contenido para mejorar la usabilidad y la experiencia del usuario en la web.

Esta metódica atención al detalle no solo garantiza que nuestro sitio sea estéticamente agradable, sino que también mejora significativamente la experiencia del usuario. Mantente atento a las siguientes etapas del curso, donde continuaremos abordando más complejidades del diseño y desarrollo web. ¡Anímate a llevar tu proyecto al siguiente nivel y sigue explorando nuevas técnicas de construcción web!

Ian Vassallo

student•

Denle esto a su button

.index-cta a button:hover {
    background-color: #47cfac;
    transform: scale(1.1);
}

Bernardo Aguayo Ortega

student•

gracias!!

Maricruz Pizaña Solano

student•

Excelente, gracias.

Sergio Estrella

teacher•

El que las clases sean tan cortas y concretas, te hacen ir de "A ver, una más" Y pues... son las 3:00 A.M y aquí estamos 😅

Matías Criado

student•

Yo cuando comencé a maquetar en web hacía lo mismo que tú, repetía y repetía los vídeos. Así que harto ánimo, que todos aprendemos de formas distintas.

Danilo Fernandez

student•

Me pasa lo mismo. Son las 4:18 am.

Emmanuel Rodríguez

student•

Nunca seguiste el diseño que nos mostraste, realizaste uno similar pero no el mostrado. No me mal interpretes, esta genial ver otras alternativas pero de qué sirvió el reto si no se llego

Ahorita es para aprender, lo acepto, pero por ese tipo de cositas se crean conflictos entre frontends y diseñadores

César Andrés Aguilar Párraga

student•

Lo ideal sería que cada uno haga un proyecto parecido, basandose en lo que dice el profesor para de esa manera aprender más.

Manuel Eguiluz

student•

Tómalo con buen humor y como un cambio de último minuto del cliente. :-D

bruno guerra solano

student•

comparto mi trabajo

Bernardo Aguayo Ortega

student•

me gusta!! Gracias por compartir

Addi Alberto Salazar Espinosa

student•

Muy bueno :D

Germán González

student•

Tambien se le pueden agregar algunas sombras al texto y boton con:

text-shadow: 2px 2px 4px #000000;
box-shadow: -11px 13px 36px -12px rgba(0,0,0,1);

GERMAN GARCIA

student•

Buena estaba tratando de recordar eso:

DANIEL SUAREZ

student•

Hey amigos como estan ..me gustaria recibir feedback de mi blog...les dejo el deskopt y el mobile...:) Deskopt:

Mobile:

Joel Dominguez Merino

student•

Me gusta mucho Daniel que bueno que le diste tu propio estilo! Buen trabajo :D

Edgar Lopez Arroyo

student•

Yo solo veo un detalle con el botón "sobre mi" me parece muy brillante y parece mas un buscador que un botón.

Paul Manobanda

student•

Esto es como un vicio..seguir y seguir..hasta terminar!! ja ja ja ja ja

Maria Emilia Taborda

student•

es como leer un buen libro, "un capitulo, un capitulo mas..." y son las 3 am jajaja.

Paul Manobanda

student•

No pudo haber mejor descripción la de un buen libro ja ja ja ja ja ja ja

Byron Mesias Cueva Cabrera

student•

Home terminado

Diego De Granda

teacher•

🙌🏼

Adrian González

student•

Por qué la imagen se ve mas completa en tu proyecto y en el de profesor se ve recortada abajo?

David Alidhasem Manzanares Casio

student•

Así quedó el Home Page de mi proyecto : )

Jerry Gil Contreras

student•

Terminé al fin

Gutierrez Diego

student•

Les dejo este link que me ha ayudado a realizar botones con algunos estilos que a mi parecer son sencillos pero agradables, así que para comenzar esta bien:

https://fvsch.com/styling-buttons

Julio César Patiño Alvarez

student•

Lo hice siguiendo el diseño original, si que me costo les dejo el codigo, por si les ayuda.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="CSS/style.css" />
    <link rel="stylesheet" href="CSS/font/flaticon.css" />
    <title>Mi Blog</title>
  </head>
  <body>
    <header>
      <section class="header_icons_container">
        <div class="icons">
          <a href="/"><span class="flaticon-001-facebook"></span></a>
          <a href="/"><span class="flaticon-002-twitter"></span></a>
          <a href="/"><span class="flaticon-011-instagram"></span></a>
          <a href="/"><span class="flaticon-010-linkedin"></span></a>
          <a href="/"><span class="flaticon-008-youtube"></span></a>
        </div>
      </section>
      <nav>
        <section class="nav_logo_container">
          <a href="index.html"
            ><img src="Assets blog/Logo-negro.png" alt="Logo de mi blog"
          /></a>
        </section>
        <section class="profile_link">
          <a href="perfil.html">Sobre mí</a>
        </section>
      </nav>
    </header>
    <main class="home_main">
      <section>
        <p class="home_main_text">
          Conoce las novedades y<br />
          noticias del mundo Tech
        </p>
        <button class="home_main_button">
          <a href="blogs.html">Entra ya !</a>
        </button>
      </section>
    </main>
  </body>
</html>

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;500;700;900&display=swap");

:root {
  /*Colors*/
  --menta-color: #47cfac;
  --dark-color: #434a54;
  --white-color: white;
  --whiteg-color: #e6e9ed;
  --gray-color: #ccd1d9;
  --grayB_oscuro-color: #656d78;
  --black-color: #23282d;
  --violet-color: #ac92ec;
  --green-color: #a0d468;
  /* Fonts */
  --Roboto-font-family: "Roboto", sans-serif;
  --RobotoMono-font-family: "Roboto Mono", monospace;
  --RobotoSlab--font-family: "Roboto Slab", serif;
}

body {
  margin: 0;
  padding: 0;
  position: fixed; /*no permite hacer scroll a la pantalla*/
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/* --------------------Header------------------------------ */
a {
  text-decoration: none;
  display: inline;
  color: var(--black-color);
}

header {
  width: 100%;
  height: 50px;
  display: grid;
  grid-template-rows: 1fr 1fr;
}
header .header_icons_container {
  width: 100%;
  height: 50px;
  display: grid;
  background-color: var(--menta-color);
}
header .header_icons_container .icons {
  width: 300px;
  height: auto;
  display: flex;
  justify-items: flex-end;
  align-items: center;
  justify-content: space-between;
  justify-self: end;
  margin-right: 50px;
}
header .icons span {
  color: var(--white-color);
}
/* --------------------Main------------------------------ */
main {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  background-image: url(/images/Cover.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  justify-items: center;
  height: 100vh;
}
main .nav_logo_container {
  margin-left: 50px;
}
main .nav_logo_container img {
  width: 220px;
  margin-top: 50px;
}

main .profile_link {
  grid-column: 3;
  align-items: center;
  justify-content: center;
  margin-right: 50px;
  margin-top: 70px;
}
main .profile_link a {
  font-family: var(--RobotoMono-font-family);
  font-size: 20px;
  color: var(--white-color);
  border-bottom: 1px solid var(--white-color);
}
.home_main {
  display: grid;
  grid-column: 2;
  height: 100%;
}
.home_main div {
  display: grid;
  grid-column: 2;
  justify-items: center;
  height: 350px;
}
.home_main_text {
  font-family: "Roboto Mono", monospace;
  font-size: 50px;
  font-weight: 700;
  color: var(--white-color);
  text-align: center;
  margin-top: 0;
}
.home_main_button {
  width: 150px;
  height: 60px;
  background-color: var(--menta-color);
  display: grid;
  align-items: center;
  margin-bottom: 100px;
  border: none;
}
.home_main_button a {
  font-weight: 700;
  font-size: 18px;
}

Cesar Antonio

student•

Muchisimas gracias por el: background-attachment: fixed, para la imagen de fondo.

Jhon Alexander Romero Gonzaga

student•

Me parece genial la idea de hacer cursos practicos, y se pueda llenar nuestros portafolio, puede que el curso se hubiera llamado curso practico de css grid pero ahora tiene mas sentido co el nuevo nombre.

Franyer Rangel

student•

Agregué unos estilos al button del main para que se vea más bonito :)

Henry Caicedo Velasco

student•

COOL!

Giselly Romero Nuñez

student•

me gustó ese fondo amarillo q tenias antes

Efraín Hernández García

student•

Justo me adelante al poner las fuentes en el body como buena práctica 😀

Henry Agustín

student•

Hola amigos espero alguien me podría ayudar a resolver mi duda. Tuve problemas para agregar los enlaces a las redes sociales del header de la forma del profesor asi que me anime a hacerlo de otra forma pero me encontré con este error. 1-El texto dentro del <span> esta encima del icono que agregue mediante <background-image> en css y si lo borro desaparece el icono, ¿cuál ha sido mi error usando esa etiqueta?

<html>
 <div class="icons">
                <a href="#"><span class="icons-item-fb">FB</span></a>
                <a href="#"><span class="icons-item-tw"></span></a>
                <a href="#"><span class="icons-item-ig">IG</span></a>
                <a href="#"><span class="icons-item-in">IN</span></a>
                <a href="#"><img src="./assets/youtube.svg" alt="icono-de-youtube"></a>
            </div>

<css> 
.icons-item-tw {
    background-image: url(/curso-de-maquetacionCSS/assets/twitter.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 32px;
    height: 32px;
}

La forma que halle para solucionar fue intercambiar <span> por una etiqueta <img> (3) pero alguien me ayuda a solventar mi duda?

Carlos Eduardo Gomez García

teacher•

¡Hola!, esto es porque el background-image siempre va a estar detrás de todo lo que esté dentro de la etiqueta, esto es conocido como "contexto de apilaiento", imagínatelo como capas, la etiqueta span va a estar debajo de todo, imagina que el span es una mesa, y encima empiezas a poner cosas (texto, otras etiquetas, etc.) como el background pertenece al span pues todo lo que pongas encima lo va a tapar, imagínate el background como si fuera la pintura de la mesa, cualquier cosa que pongas encima va a estar por encima de la pintura, eso es lo que sucede, por eso tu texto está encima de la imagen, y por eso es que con la etiqueta img si te funciona, porque está etiqueta está encima del span.

Ahora, ¿por qué desaparece cuando quitas el texto? Porque no tiene ningún ancho ni alto, si tú pones texto o algo la etiqueta va a tomar el ancho y alto de ese texto, pero si no le pones nada adentro entonces la etiqueta no tendrá ni ancho ni alto, por eso no se ve, esto puedes solucionarlo con CSS poniéndole un ancho y alto fijo :D

Kevin Riquelme Valdes

student•

Hola comunidad! Tengo una duda. La imagen del main (background), no me queda exactamente igual. No se llega a ver del cuello para abajo. Copio parte de mi código y también agrego la imagen del trabajo terminado. Agradezco si alguien puede guiarme en como solucionar la posición de la imagen.

Marcelo Vinicio Chavarría Ugalde

student•

Hola bro, quiza puedas probar como consejo. La propiedad:

background-position-y: ;

Con ella podrás mover tu fondo en el eje vertical Y, si usas números positivos en px se mueve hacia abajo, si usas números negativos se mueve hacia arriba.

Puedes combinar:

background-position: center;
background-position-y: ;

Prueba cuantos pixeles debes mover la imagen. Espero haberte ayudado. Un saludo bro!

Alejandro Ramos

student•

Usando Sass cree una función que me permite escoger el tipo de fuente solo con mandarle un número xd

Jhon Carlos Colorado Angulo

student•

Excelente home terminado. Me encanta como quedó.

Jessica Rodríguez

student•

Por fin me estoy animando hacer los proyectos, llevo meses viendo cursos sin ánimos de hacer nada, ver los resultados me motiva. :)