En este post vamos a aprender a crear un botón con HTML y CSS en WordPress. Es algo muy sencillo, que usarás y además es un ejercicio perfecto para pillarle el gusanillo al código.

Botón con HTML Y CSS

Un botón es simplemente un enlace bonito, y que al pulsarlo nos llevará a una parte de nuestra web o a otra web.

Por lo tanto, crear un botón es tan fácil como crear un enlace HTML y darle un estilo CSS.

Creamos un enlace

Puedes crearlo con el editor de texto de WordPress y copiar el HTML, simplemente escribe el texto que quieras e insertar un enlace.

Después ves a la pestaña HTML y fíjate en el código, te debe quedar algo así.

<a href="https://sensacionweb.com/">Mi Botón</a>

Este es un enlace normal, que está compuesto por la etiqueta <a> y la referencia href= para indicar a qué web te va a llevar y el texto del enlace.

Aplicamos una clase al enlace

Al enlace al que queremos aplicarle un enlace para convertirlo en un botón hay que aplicarle una class (identificación para elementos de una clase) para después poderle aplicar un estilo con CSS a todos los botones que vamos a crear de esa clase.

La clase puede ser «boton-personalizado» y se lo agregamos al enlace poniendo class=boton-personalizado como está a continuación:

<a class="boton-personalizado" href="https://sensacionweb.com/">Mi Botón</a>

Ya tenemos nuestro enlace al que  hemos identificado como Botón personalizado y ahora le vamos a aplicar código CSS para darle un aspecto de botón.

Vamos al personalizador de CSS

CSS es código para dar estilos a los elementos de la web, entre ellos a los enlaces.

El código CSS lo puedes introducir en diferentes lugares, yo te recomiendo el personalizar de CSS de WordPress.

Pero también puedes modificar los archivos de tu tema, o copiarlo en las opciones de CSS personalizado de tu tema si dispone de ellas.

Para llegar al personalizador de CSS de WordPress tienes que ir a la parte Visual de tu web (frontend) y veras en la barra superior el botón Personalizar y una vez dentro ir a CSS adicional.

Busca el apartado CSS adicional y allí es donde puedes pegar los códigos CSS que veremos a continuación.

Botones de html y css ejemplos

Mediante CSS vamos a aplicarle una serie de características al botón como fondo de color, un color al texto y relleno para darle tamaño y otros.

Vamos a ver algunos ejemplos para que puedas copiar, pegar o modificar el código y crear tus botones.

Utilizaremos estos códigos para modificar el estilo CSS:

• text-decoration: para quitarle el estilo de enlace, como el subrayado.
• font-weight: para darle cuerpo (tipo negrita) al texto del botón.
• font-size: el tamaño del texto en pixeles.
• color: color del texto en código hexadecimal.
• padding-top: el relleno superior del botón.
• padding-bottom: el relleno inferior del botón.
• padding-left: el relleno izquierdo del botón.
• padding-right: el relleno derecho del botón.
• background-color: color de fondo del botón.
• border-width: Anchura del borde en píxeles.
• border-color: color del borde en código hexadecimal.
• border-radius: redondeo del botón.
• border-style: el estilo del borde, línea, con puntos…

Botón Rectangular: Un sencillo botón con forma rectangular. Fijare en el padding-left y padding-right que se han aumentado para hacer el relleno en forma de rectángulo.

.boton-personalizado {
text-decoration:none;
font-weight:600;
font-size:20px;
color:#ffffff;
padding-top:20px;
padding-bottom:20px;
padding-left:40px;
padding-right:40px;
background-color:#005BBB;
}

Botón Rectangular Largo: En este estilo el botón es más largo para aumentar su visibilidad, únicamente se ha aumentado el padding-left y padding-right.

.boton-personalizado-2 {
text-decoration:none;
font-weight:600;
font-size:20px;
color:#ffffff;
padding-top:15px;
padding-bottom:15px;
padding-left:150px;
padding-right:150px;
background-color:#FFD27D;
}

Botón con borde: A este botón se le a aplicado un sencillo borde de color usando border-color, puedes definir el tamaño del borde con border-width y el border-style sirve para que el borde sea una línea, (si pones dotted el botón será con puntitos)

.boton-personalizado-3 {
text-decoration:none;
font-weight: 600;
font-size: 20px;
color:#ffffff;
padding-top:15px;
padding-bottom:15px;
padding-left:40px;
padding-right:40px;
background-color:#f2595e;
border-color: #F69DA1;
border-width: 3px;
border-style: solid;
}

Botón con borde redondeado: Puedes redondear las esquinas de un botón con border-radius y cambiar ligeramente su aspecto. Con 3px se suavizan las esquinas y para crear los bordes redondeados en un botón rectangular el tamaño que hay que poner con border-radius depende del tamaño del botón. Juguetea con el botón hasta que lo rompas, sin miedo!

.boton-personalizado-4 {
text-decoration:none;
font-weight: 600;
font-size: 20px;
color:#333333;
padding-top:15px;
padding-bottom:15px;
padding-left:40px;
padding-right:40px;
background-color:#FFD27D;
border-color: #d8d8d8;
border-width: 3px;
border-style: solid;
border-radius:35px;
}

Botón fantasma: Un botón fantasma tiene el fondo transparente para que se vea lo que hay debajo, quedan geniales con el borde y el texto en blanco sobre fotografías oscuras o con color en fotografías iluminadas. Para que el fondo sea transparente se usa background-color: transparent; es muy fácil!

.boton-personalizado-5 {
text-decoration:none;
font-weight: 600;
font-size: 20px;
color:#000000;
padding-top:15px;
padding-bottom:15px;
padding-left:40px;
padding-right:40px;
background-color: transparent;
border-width: 3px;
border-style: solid;
border-color: #000000;
}

5º Efecto Hover en el Botón  (Estilo diferente al pasar el ratón)

Si quieres que el botón cambie de color o cambie cualquier otra característica, puedes hacerlo utilizando la variable :hover detrás de la clase del botón que quieras que cambie.

Por ejemplo, en este caso he copiado el estilo del botón 2 y he añadido que al pasar el ratón por encima cambie a color negro.

.boton-personalizado-2 {
text-decoration:none;
font-weight:600;
font-size:20px;
color:#ffffff;
padding-top:15px;
padding-bottom:15px;
padding-left:150px;
padding-right:150px;
background-color:#FFD27D;
}
/* Este es el estilo al poner el cursor encima del boton*/
.boton-personalizado-2:hover {
background-color:#000000;
}

6º Jugar con los botones.

Lo más difícil es crear botones visualmente atractivos y que peguen con la estética de tu web.

Para ello lo mejor es fijarse en botones que ya han sido creados por otros diseñadores y buscar inspiración, puedes buscarlos en pinterest por ejemplo o en las demos de los temas de WordPress.

Consejos que yo suelo autoaplicarme:

• Busca que los colores queden bien y peguen.
• Juega con el tamaño.
• Si no te termina de gustar el color, suavízalo a un tono pastel, (como el botón del 2 estilo)
• No te flipes, lo sencillo queda mejor.
• Si no te sale, busca botones y básate el estilo. (Es un maldito botón no te rompas la cabeza jajaja)

Si te ha gustado este sencillo tutorial puede que te interesen los plugins editores de CSS, puedes leer el post Editores CSS visuales para WordPress

Tambien puedes ayudarte de herramientas online como css3buttongenerator.com o bestcssbuttongenerator.com

¡Espero que este post te haya ayudado a crear un botón con HTML y CSS en tus páginas o post! Un abrazo!