WordPress: Cómo crear un botón simple con HTML y CSS
¡Buenos días! En este artículo aprenderemos a crear botones simples en WordPress. No usaremos ningún plugin y lo haremos con HTML y CSS pero veréis que es muy sencillo. ¡Vamos allá!
Voy a dividir el proceso de crear un botón en 2 pasos: estructura HTML y estilos con CSS.
Paso 1: Creamos la estructura HTML para el botón
Técnicamente un botón en desarrollo web no es más que un enlace bonito. Así que seguimos estos pasos:
1. Antes de todo, accedemos al editor de entrada o página donde queremos insertar el botón y vamos a la pestaña HTML, no Visual.
2. Lo primero sería crear un enlace con ciertas características. Empezamos poniendo el texto del botón (por ejemplo “Visita mi página”) entre las etiquetas de enlace <a> </a>. Quedaría algo así:
<a>Visita mi página</a>
3. Le damos un ID al enlace para poder estilizarlo con CSS luego. El ID podría ser “boton-bonito” por ejemplo y lo haremos poniendo id=”botón bonito” dentro de la primera etiqueta:
<a id="boton-bonito">Visita mi página</a>
4. Indicamos el destino del botón. Es decir, dónde nos va a llevar, con href=”https://…”. Quedaría así:
<a id="boton-bonito" href="https://pro.empresiona.com">Visita mi página</a>
De momento el resultado sería éste, es decir, un simple enlace con un ID:
Y ya hemos terminado con HTML. Como veis no tiene mucha complicación. ahora pasamos al CSS.
Paso 2: Estilizamos el botón con CSS
CSS nos servirá para dar estilos a nuestro enlace y dejarlo más bonito. Hace poco escribí un artículo sobre diferentes métodos de añadir y modificar el CSS en WordPress así que puedes consultarlo si te hace falta. Así que ahora accederemos a nuestra forma favorita de añadir CSS y seguiremos con el diseño. Os comparto el código que utilicé en el vídeo:
#boton-bonito {
text-decoration:none;
color:white;
padding:10px 20px;
background-color:#FF9800;
display:inline-block
}
Lo que hará este código, en este mismo orden, és:
- Quitarle cualquier decoración al texto del enlace, que en este caso es el subrallado
- Darle un color blanco al texto del botón
- Crear espacio de 20 px vertical y 10px horizontal entre el texto y los bordes
- Darle un color de fondo naranja al botón
Y nos quedaríamos con esto:
Además, para que el botón tenga un efecto cuando pasemos el ratón por encima, podemos utilizar la etiqueta :hover y nos quedaría algo así:
#boton-bonito:hover {
background-color:#333333;
}
De esta manera el color de fondo del botón seguirá siendo naranja, pero cuando se pase el botón por encima, se volverá negro:
Si inspeccionas el código del botón veréis que le he añadido otras clases de las que no he dicho nada. No hagáis caso a eso: simplemente era para mostraros diferentes fases del proceso de la creación del botón y poder estilizarlas por separado.
Pásate por este enlace si quieres aprender a hacer sencillos ajustes y cambios con CSS sin usar plugins 🙂
