Cómo poner botones dentro de tu entrada

15 enero 2019

Ya llevaba tiempo sin hacer entradas explicando HTML pero creo que varios tenemos el propósito de "echarle galleta" a nuestro blog en el 2019 y puede que quieras agregarle algunos toques más profesionales a tus entradas sin quebrarte mucho la cabeza.

Una forma de hacer esto es poniendo botones en tu entrada que te manden a Goodreads, Amazon,etc. en vez de usar un simple enlace. Por ejemplo:



O si quieres ver como se ve en vivo, puedes ver la entrada pasada (la reseña de Máscaras) donde he agregado uno de estos botones.

Para tener este efecto, necesitas poner este código en tu entrada (en la sección de HTML) donde quieras poner el botón.

<a class="botonentrada" href="URL" title="DESCRIPCION">TEXTO A MOSTRAR</a>

Puedes cambiar todo lo que está en morado. Luego te vas al código de tu blog y agregas el siguiente CSS:

.botonentrada {
background-color: #E1AD9D!important;/* color de fondo del boton */
color: #ffff!important ; /* color del texto*/
padding: 8px 20px; /* espacio entre el boton y el texto */
font-family: Roboto, sans-serif;
font-size: 10px;
letter-spacing: 2px!important; /* espacio entre los caracteres */
cursor: pointer; /* para que cambie el cursor */ }

.botonentrada:hover {
background-color: #E0E0E0!important; /* color de fondo del boton al pasarle el raton */
color: #f9b3f7!important ; /* color del texto al pasarle el raton*/
}


¡Listo! bastante fácil y debo decir que se ve mucho mejor ¿verdad?

10 comentarios:

  1. Oh, wooooowwww! No sabía que quería hacer esto hasta que nos contaste del tutorial JAJJAAJ. MUCHAS GRACIAS POR ESTO, linda! Ya mismo voy a probarlo en mi blog :D
    Un beso! Nos leemos :)

    ResponderEliminar
  2. Holaa, me pasa igual que Sandra, tampoco sabía que quería hacer esto hasta ver este tutorial jaja mil graciassss, me gusta de vez en cuando poner las opciones para comprar o cualquier botón para derivar a los lectores
    Un abrazooo!

    ResponderEliminar
    Respuestas
    1. Además hace que llamen más la atención ;) Gracias por pasar <3

      Eliminar
  3. Hola! Super útil para destacar algún link, me encanta. Gracias por el tutorial :)

    ResponderEliminar
  4. ¡Hola Lau! Mil gracias por la ayuda que será más que útil para el blog.
    Un abrazo enorme.
    Nos leemos.

    ResponderEliminar

Gracias por leer la entrada, te agradecería aún más si dejas un comentario :)