Crear botones en WordPress

Tiempo estimado de lectura: 3 minutos

 

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.

.boton-negro {
background-color: #222222;
border: 2px solid #222222;
color: #ffffff;
font-size: 18px;
text-align: center;
text-decoration: none;
padding: 5px;
display: inherit;
}

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:

.boton-negro:hover {
background-color: #ffffff;
border: 1px solid #020202;
color: #020202;
}

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.

 


¿Te ha servido este artículo?, PUES DALE UNA LIMOSNITA, POR FAVOR. 0

[whatsapp]

¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada.

He leído y acepto la política de privacidad de este sitio. *