Botones para nuestra web. Html5 y Css3 para botones web en blogger

Posted by Informática Riópar on mayo 07, 2019

Ahora vamos a agregar un botón a nuestro blog con código HTML5 y CSS3


Primero: código HTML5 de nuestro botón.

 Para añadirlo en la pestalla Diseño añadiremos un Gadget en el lugar en el que queramos agregar el botón que será del tipo HTML. En él pondremos el siguiente código:

 <a class="boton_blogger" href="https://riomundoinformatica.blogspot.com/"
target="_blank">Mi botón</a>
Explicación del código HTML:
En el atributo href, entre comillas irá la dirección del enlace, en este ejemplo he puesto la dirección de este blog, el enlace al que queramos que nos dirija nuestro botón, para poner correctamente la URL de este enlace abre una pestaña en el navegador y copia la dirección completa.
En el atributo class: boton_blogger puedes escribir cualquier nombre que le quieras asignar a la clase, ésta servirá para enlazar el código HTML con el código CSS3, (en el código CSS3 deberá estar esta clase también).
Target="_blank": nos sirve para que el enlace se nos abra en otra nueva ventana.
Recuerda mantener las comillas que trae el código.

Segundo: Código CSS3 de nuestro botón


Este código lo vamos a agregar en blogger en la pestaña tema, personalizar, avanzado, añadir CSS, en el cuadrado blanco que nos sale a la derecha. 
Así no tenemos que tocar el código de nuestra plantilla blogger.

El código CSS3
1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
  .boton_blogger{
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    background-color: #B13861;
    border-radius: 6px;
    border: 2px solid #0016b0;
  }
</style>

 El cógido hover, este código modifica nuestro botón cuando
pasamos el ratón por encima:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type="text/css">
  .boton_blogger{
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    background-color: #1883ba;
    border-radius: 6px;
    border: 2px solid #0016b0;
  }
  .boton_blogger:hover{
    color: #1883ba;
    background-color: #ffffff;
  }
</style>

Explicación:
Text-decoration se usa para establecer el formato de texto:
subrayado (underline) 
suprarrayado (overline), 
tachado (line-through) 
o parpadeo (blink)
en este ejemplo lo tenemos en none pero podemos ponerlo como queramos.

Padding: es la distancia entre el texto y el borde del botón. En este caso está establecido en 10 pixeles.
Font-wheight: se refiere al grosor de las letras. Mientras más alto sea su número, más gruesas serán.
Font-size: es la propiedad que controla el tamaño de las letras, en este caso, también en pixeles.
Color: se refiere al color de la letra. 
Podremos personalizarlo fácilmente con un código HEX, RGB  o incluso RGBA.
Aquí te dejo un enlace en el que podrás copiar el código de cualquier color hexadecimal para tus botones:
Colores


Background-color es el color de fondo del botón, este color debemos combinarlo bien con nuestro hover para que el efecto nos quede bien.
Border-radius: se trata del redondeado de los cantos de botón. Mientras más pixeles asignemos (más grande sea el número), más redondeados serán los bordes. Si, lo que queremos es un botón sin bordes redondeados, lo podemos eliminar.
Border: en esta propiedad vamos a configurar el borde del botón. Podremos asignar un grosor en pixeles y un color.
También tendremos que tener en cuenta que si el fondo es oscuro el color del texto ha de ser claro y viceversa. Y también poner colores que nos combinen bien.

 En el hover colocaremos todo aquello que queremos que se modifiquen al pasar el ratón por encima con los valores que queremos establecer.

Resultado:
Juego Reacción


Categories: