¿Cómo poner un botón en tu blog?

Buenas mis niñas a un nuevo viernes de tutorialessss!!!

El tutorial que les traigo hoy es de cómo poner un botón de este estilo en vuestros blogs, se trata de un botón que puede dirigiros tanto a apartados específicos dentro de vuestro blog o a enlaces externos:

Como siempre aquí tenéis el código necesario para el botón y ahora os explico todito (recordad no borrar sin querer ningún espacio ni comillas para que no se os rompa el código):

<a href="URL_ENLACE" class="btn-botón">

  <span class="texto">

    <span class="linea1">TEXTO</span>

    <span class="linea2">TEXTO ABAJO</span>

  </span>

</a>

<style>

.btn-botón {

  display: inline-block;

  text-decoration: none;

  border-radius: 40px;

  padding: 14px 22px;

  text-align: center;

  background: repeating-linear-gradient(

    90deg,

    #9A1BD0 0px,

    #9A1BD0 25px,

    #FFD452 25px,

    #FFD452 50px

  );

  /* Animación suave */

  transition: transform 0.3s ease;

}

/* Agrandado suave */

.btn-botón:hover {

  transform: scale(1.08);

}

/* Caja del texto */

.btn-botón .texto {

  display: inline-block;

  background: rgba(000, 000, 000, 0.60);

  padding: 10px 50px;

  border-radius: 60px;

  transition: background 0.3s ease;

}

.btn-botón:hover .texto {

  background: rgba(000, 000, 000, 0.60);

}

.btn-botón .linea1 {

  display: block;

  font-family: "Slackey", sans-serif;

  font-size: 20px;

  color: #00000;

}

.btn-botón .linea2 {

  display: block;

  font-family: "Slackey", sans-serif;

  font-size: 35px;

  font-weight: bold;

  color: #00000;

}

</style>

Lo he querido dejar con los colores que tengo puestos yo para que veáis donde tengo puestos los mismos colores y donde se cambian para que os sea más sencillo.

Como siempre, voy a explicar paso a paso cómo es que se compone este código:

En la parte donde pone "<a href="URL_ENLACE" class="btn-botón">" es donde colocarás en URL correspondiente. Si tu intención es que vaya a un lugar en concreto de tu blog tendrás que hacerlo con las etiquetas. En el tutorial de ¿Cómo poner un pequeño catálogo de contenido? hablo de cómo se ponen las etiquetas por lo que puedes ir a verlo si aún no sabes.

La cosa es que tendrás que tener un URL tal que así "https://EL URL DE TU BLOG/search/label/LA ETIQUETA QUE PUSISTE". Si por el contrario quieres poner otro enlace pues simplemente pones ahí el URL que quieras.

Un poco más adelante encuentras el escrito de lo que pongas de título en "<span class="linea1">TEXTO</span> <span class="linea2">TEXTO ABAJO</span>". Yo tengo puesto arriba el "escuela para" y abajo "Brujas" que ya ver que uno se ve más grande que el otro (aunque luego se pueda modificar).

En la parte de los colores de las franjas encontráis esto "#9A1BD0 0px, #9A1BD0 25px, #FFD452 25px, #FFD452 50px". ¿Ves que hay dos y dos? Pues respeta eso para que salga bien. Te recuerdo que puedes mirar los colores que más te gusten en HTMLColorCode.

Más abajo te encontrarás esto "background: rgba(000, 000, 000, 0.60);" que es el color de el aro ese que hay al rededor para separar las letras del fondo que yo tengo en morado. Ten cuidado en no borrar el 0.60 que está así al lado porque es la opacidad. Si quieres ponerlo más nítido súbelo hasta 1 y si quieres que sea más transparente bájalo a 0.10.

El de abajo, este "background: rgba(000, 000, 000, 0.60);" es lo mismo pero para cuando el cursor esté encima que a mi se me pone en amarillo.

Ahora ya pasamos a la última parte, la de las letras, que es igual en ambos apartados por lo que solo explico uno que aplica a los dos:

En la parte donde pone "font-family: "Slackey", sans-serif;" puedes cambiar la tipografía del texto solo si pones el nombre completo del tipo de letra. Ponde pone el "font-size: 20px;" podrás cambiar el tamaño, yo lo tengo uno más grande que otro pero lo puedes dejar del mismo tamaño si quieres. Por último encuentras el "color: #00000;" que es para, pues, el color LOL y puedes tanto poner el mismo en ambas partes como diferentes.

Y ya estaría!! Este tutorial me lo han pedido ya un par de veces y aquí os lo dejo <33 Si queréis algún otro decídmelo porque se me están acabando las ideas...

Espero que os haya servidooo!! Nos vemosss