Como crear un botón con CSS

En este tutorial vamos a ver como crear un botón con CSS para colocar en nuestra página web y así hacer más evidente nuestro call to action.

Ya hemos visto en otros artículos que es muy importante destacar nuestro call to action de una manera clara y directa. Ya sea en la home, en la página de servicios o en cualquier entrada.

En este tutorial vamos a aprender, paso a paso, cómo crear un botón con CSS que podremos introducir donde queramos: entradas, páginas o widgets.

Crear la class del botón

El primer paso va a ser crear, gracias al CSS, la class (o clase) de nuestro botón. Básicamente, el CSS (Cascading Style Sheets o hojas de estilo en cascada) es un lenguaje que define la apariencia de un documento escrito. Para que nos entendamos en un lenguaje sencillo: es hacer bonito y darle un toque de diseño a nuestros textos. Si os interesa, en un futuro, podemos hacer un curso exclusivamente de CSS.

Como iba diciendo, el primer paso para crear el botón es definir la class. Para ello, tenemos varias posibilidades. Una seria añadir el código al final del archivo styles.css de nuestro theme, pero implicaría modificar los archivos desde FTP y además, cada vez que se actualizara el theme, perderíamos los cambios realizados.

Por ello, una manera muy sencilla es utilizar la sección de CSS Adicional que encontramos en el personalizador. Es importante destacar, que si cambiamos de theme, perderemos el diseño del botón. Lo bueno de crear botones con CSS y que estos sean simples enlaces, es que si perdemos el diseño del botón nos quedará un enlace normal. Con lo que igualmente, será funcional.

Otra opción es usar un plugin que te permita añadir código CSS y que no dependa del theme.

Si ya hemos decidido donde colocar el CSS, el código para crear el botón sería el siguiente:

[php]
.boton-bonito {
text-decoration:none;
color:white;
padding:20px;
background-color:#e85555;
border-radius: 40px</code>

}
.boton-bonito:hover {
background-color:#333333;
}
[/php]

Consideraciones a tener en cuenta:

• Podéis cambiar el color del botón por el que más os guste o el vuestro corporativo en «background-color«.
• Si quitáis la línea de «border-radius» tendréis un  botón cuadrado en lugar de redondeado.
• El color del «hover» es el color que sale cuando pasamos el ratón por enciuma de nuestro botón; yo lo he puesto negro, pero podéis poner el que queráis.

Insertar el botón en las entradas con HTML

Una vez hemos creado el botón con el CSS llega el momento de insertarlo allá donde queranos: entradas, páginas, custom post types personalizados, etc. Para ello haremos uso del código HTML.

En el editor de nuestras entradas o páginas hacemos click en la pestaña de HTML para poder insertar nuestro código.

En este ejemplo, vamos a crear un botón con un enlace, pues funcionan muy bien como Call To Action. Por lo tanto, el código sería el siguiente:

[php]<a class=»boton-bonito» href=»https://webdenutris.com/registro/»>Apúntate por 5€ al mes/a
</a>[/php]

Consideraciones:

• Como podéis imaginar, simplemente tenéis que colocar vuestro enlace y el título que queréis que aparezca en el botón.

El resultado final sería algo así:

Apúntate por 5€ al mes/a

Espero que os haya parecido interesante este tutorial y podáis crear vuestros botones con solo unas cuentas líneas de código. Ya habéis visto que es muy sencillo.

Si tienes cualquier pregunta o duda, puedes escribir directamente en los comentarios.

Nota: Próximamente, con la actualización de WordPress 5.0, podremos hacer uso del editor visual Gutenberg que, entre otras cosas, nos permitirá añadir botones a nuestras entradas de manera muy sencilla. Mientras, podemos hacer uso de este tutorial. Además, el 27 de agosto sacaremos un curso de Gutenber de una semana dónde enseñaremos a utilizar Gutenberg.