crear-botones-con-html-y-css

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.

personalizador-css-de-wordpress

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

css-adicional

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.

crear-boton-azul-con-css

.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.

crear-un-boton-con-css

.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)

crear-boton-con-borde-con-css

.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-con-esquinas-redondeadas

.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-fantasma-css

boton-transparente-css

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

2 comentarios en “Como crear un bot√≥n con html y css

  1. Me ha parecido muy interesante, ya sabía algunos truquitos pero ahora se ven reforzados. Gracias Gerardo una vez más. Un saludo.

Deja un comentario

El email no ser√° publicado. Vas a introducir datos en la web si comentas:

  • Responsable de los datos Gerardo Garc√≠a Asensio
  • Los datos se usar√°n para gesti√≥n de comentarios y medidas de seguridad
  • Legitimaci√≥n: tu consentimiento.
  • Destinatarios: los datos estar√°n ubicados en los servidores de Siteground.
  • Derechos: podr√°s ejercer tus derechos, entre otros, rectificar, limitar y borrar tus datos.

Pin It on Pinterest

Esta web utiliza cookies para su funcionamiento. Lee y acepta el aviso legal o abandona la web. m√°s info

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar