Crear botones en WordPress

Cómo podemos crear botones en WordPress

Hoy veremos cómo podemos crear botones en WordPress de una forma sencilla y rápida.

Si alguna vez has querido utilizar un botón en tu web, pero tu tema no te lo permitía, o no sabías cómo crearlo, este es el artículo indicado para ti.

En realidad un botón no es otra cosa que un enlace con un aspecto concreto. Al hacer clic en el botón se llevaría a cabo una acción, pero esa acción también podíamos haberla llevado a cabo mediante un simple enlace, lo que ocurre es que con el botón lo hacemos más bonito visualmente, pero crear el botón es más sencillo de lo que parece.

¡Vamos a ello!.

Código que vamos a utilizar para crear botones en WordPress

El código que utilizaremos es bastante sencillo, no nos meteremos en problemas con PHP, JavaScript ni nada por le estilo, utilizaremos unas sencillas líneas de código CSS.

Verás qué sencillo es.

Este contenido es exclusivo para los usuarios de pago de la web.
Si ya lo eres accede a tu cuenta, y si aún no te has suscrito, regístrate desde aquí.

¡Nos vemos dentro!

Con este código ya hemos creado un botón de color negro con un borde negro de 2 píxeles de ancho, el texto del botón es blanco en un tamaño de 18px y centrado con respecto al botón. Ya sabes que si quieres cambiar los colores puedes hacerlo sin ningún problema, pero eso sí, acuérdate de cambiar el nombre a la clase del botón (.boton-negro).

Si quieres que al pasar el cursor por encima del botón, este cambie de color, tendremos que crear otra clase:

Este contenido es exclusivo para los usuarios de pago de la web.
Si ya lo eres accede a tu cuenta, y si aún no te has suscrito, regístrate desde aquí.

¡Nos vemos dentro!


En este ejemplo tendremos un botón de color negro, y al situar el ratón sobre él cambiará a color blanco (manteniendo el color negro del borde para poder ver las dimensiones del propio botón).

Dónde tenemos que poner este código

Al ser n código CSS, podremos ponerlo directamente en el personalizador de WordPress, para ello vete a Apariencia, Personalizar, CSS adicional.

Este artículo ha sido visitado: 7 veces

Obtén acceso a los secretos mejor guardados de WordPress con solo un clic

Suscríbete a la newsletter y recibe en tu correo electrónico 10 snippets de código exclusivos que nunca se han publicado en nuestra membresía y que nunca se publicarán.

Obtén la ventaja definitiva en WordPress y conviértete en un experto.

leadmagnetcodigos

PDF

10 códigos para WordPress, Divi y WooCommerce, que nunca han sido publicados aquí, ni se publicarán

Deja que WordPress trabaje por ti, utiliza código.