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á!

YouTube video

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://empresiona.com">Visita mi página</a>

De momento el resultado sería éste, es decir, un simple enlace con un ID:

Visita mi página

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:

  1. Quitarle cualquier decoración al texto del enlace, que en este caso es el subrallado
  2. Darle un color blanco al texto del botón
  3. Crear espacio de 20 px vertical y 10px horizontal entre el texto y los bordes
  4. Darle un color de fondo naranja al botón

Y nos quedaríamos con esto:

Visita mi página

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:

Visita mi página

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 🙂

¿Haces webs para clientes
y te has atascado en
precios bajos?

He creado un programa formativo para ayudarte a ganar más dinero por cada proyecto, gestionar mejor a tus clientes y trabajar con orden y tranquilidad en tus servicios de diseño y desarrollo web.