HTML y CSS

Crea y Personaliza tus propios Botones con HTML y CSS

HTML y CSS

Gracias a los lenguajes HTML y CSS podemos crear todos los tipos de botones que queramos, las posibilidades son infinitas.

Puede que estés utilizando un CMS como WordPress y ya tengas algún plugin para crear botones de forma sencilla como por ejemplo WP Shortcode y pensaras… ¿Y a mí de que me sirve esto si tengo un plugin que ya me realiza esta labor? Muy fácil, tras leerte este tutorial podrás personalizar esos botones que ya tienes. Y si no dispones de un plugin, tu mismo podrás crear tus botones.

Es importante tener una base de HTML y CSS, sin ella viviremos siempre anclados a lo que nos ofrecen los plugins/plantillas. ¿Pero qué pasa si quieres cambiar algo? Ahí es donde vas a agradecer unos conocimientos en programación web, por que es importante saber como funciona tu página por dentro detrás del aspecto visual que vemos todos.

Crear un botón con HTML

Lo primero es crear el botón y eso lo realizamos con HTML, que es el lenguaje encargado del contenido.

En este ejemplo voy a crear los botones como enlaces, simplemente después con CSS le daremos un aspecto más de botón.

Los botones en HTML se crean así:

<a href="#">Botón</a>

En el parámetro href añadiremos la url a la que queremos enlazar, y entre las etiquetas <a> y </a> añadiremos el texto de nuestro enlace. El “#” se utiliza para no enlazar a nada, a modo de ejemplo.

Si añadimos este código la cosa quedaría así:

Botón

En mi caso aparece un enlace simple de color turquesa ya que esta página ya tiene sus propios estilos CSS, pero ahora veremos como modificar la apariencia de este enlace para convertirlo en un botón.

Personalizar un Botón con CSS

Ahora modificaremos el aspecto del enlace con CSS para que parezca más un botón. Pero antes de nada vamos a realizar una modificación en el HTML:

<a class="boton" href="#">Botón</a>

Fíjate en que hemos añadido un nuevo parámetro al enlace, el atributo class. Esto sirve para asignarle una “categoría” a cualquier elemento de la página, editaremos los estilos de la clase “boton” y todos los elementos marcados con esa clase adquirirán sus propiedades. Aquí te explico mejor que es todo esto de las clases.

Cómo todavía no hemos creado esas propiedades de la clase “botón” el enlace no ha cambiado en absoluto.

Botón

Ten en cuenta que si utilizas alguna plantilla o plugin tus botones ya tendrán su propia clase definida, utiliza esa clase.

Darle forma al Botón

Ahora vamos a crear un botón muy standard, simplemente tenemos que añadir propiedades a la clase “boton” con CSS.

.boton {
    padding: 10px 20px;
    background-color: white;
    color: #222!important;
}

Voy a explicar un poco todas estas propiedades:

  • padding: Sirve para añadir un margen al texto del botón, solo creará el margen dentro del botón, no fuera, con lo cual ampliaremos el tamaño del botón. Los dos valores (10px y 20px) son la medida de este margen en pixeles, el primer valor es la medida de los márgenes superior e inferior y el segundo son las medidas de izquierda y derecha.
  • background-color: Esta propiedad sirve para cambiar el color de fondo
  • color: Para cambiar el color del texto, #222 es el código de un color negro tirando a gris oscuro.

Si te fijas, hay algo extraño en la propiedad color, el !important, esto he tenido que utilizarlo debido a que sin ese fragmento de código el color del enlace se seguía mostrando turquesa. Esto pasa mucho, choque de normas. En estos casos el !important le dará prioridad a esa orden.

De momento nuestro botón queda así:

Botón

¡Ya parece un botón!

Coloreando el botón y creando varios modelos de colores

Ya tenemos un diseño standard de botón, ahora supongamos que queramos crear botones de distintos colores para utilizarlos a placer según nuestras necesidades.

Vamos a crear clases con distintos colores de botón para aplicarlas luego a nuestro botón.

.boton.turquesa {
    background-color: #00c69f; /* Código de un color Turquesa */
    color: white!important;
}

.boton.verde {
    background-color: #00d973; /* Código de un color Verde */
    color: white!important;
}

.boton.azul {
    background-color: #0b96df; /* Código de un color Azul */
    color: white!important;
}

Ahora que tenemos nuevas clases con sus propiedades solo tenemos que añadirlas en el código HTML.

Botón Turquesa

<a class="boton turquesa" href="#">Botón Turquesa</a>

Observa que dejamos un espacio entre cada clase.

Y nuestro botón se colorea:

Botón Turquesa

Botón Verde

<a class="boton verde" href="#">Botón Verde</a>

Y ya tenemos nuestro botón verde:

Botón Verde

Botón Azul

<a class="boton azul" href="#">Botón Azul/a>

Y así luce nuestro botón azul:

Botón Azul

Si quisiéramos un único botón podríamos añadirle el color que queramos a la clase “boton” en la propiedad background-color y color, pero esto se aplicaría entonces a todos los botones marcados con la clase “boton” y la gracia es tener varios de distintos colores.

Personalizando más los botones

Por ahora hemos creado unos botones estilo flat, es un diseño que a mi personalmente me encanta. Pero podemos personalizarlos mas si queremos con bordes, bordes redondeados y con un efecto para cuando tengamos el ratón sobre el botón.

Añadir/eliminar bordes

Voy a utilizar una nueva clase botón para esto, la clase “botón naranja”.

<a class="boton naranja" href="#">Botón Naranja/a>

En cuanto al CSS, será muy parecido a los otros botones, pero en este caso añadiremos la propiedad border para ponerle un borde.

.boton.naranja {
    background-color: #f37500; /* Naranja Zanahoria */
    color: white!important;
    border: 1px solid #e24000; /* Naranja Oscuro */
}

Con la propiedad border podemos añadir el grosor de línea del borde (1px en este caso), la forma (solid es una línea normal) y el color.

Si lo que queremos es eliminar el borde de nuestro botón tenemos que añadir a su clase la propiedad (border: 0;) de este modo le indicamos que no queremos borde. Si no funciona recordar probando a utilizar el !important.

Veamos como ha quedado:

Botón Naranja con Borde

Botón con bordes redondeados

De nuevo crearé una clase nueva para verlo, la clase botón rojo.

<a class="boton rojo" href="#">Botón Rojo con Bordes Redondeados</a>

Para crear los bordes redondeados tenemos la propiedad border-radius, si quieres saber más sobre esta propiedad te recomiendo este post.

.boton.rojo {
    padding: 10px 20px;
    background-color: #f37500; /* Color Rojo */
    color: white!important;
    border-radius: 10px;
}

A más pixeles añadamos en border-radius más pronunciado será el borde redondeado.

Aquí tienes una muestra del botón:

Botón Rojo con Bordes Redondeados

Efecto Hover

El efecto hover se aplica cuando el usuario tiene el ratón sobre el elemento seleccionado, en este caso los botones. Crearemos un nuevo botón negro para esto y le cambiaremos el color cuando se esté encima de él.

<a class="boton negro" href="#">Botón Negro con Efecto Hover</a>

En este caso tendremos que crear dos reglas, la del botón y la del botón en hover.

.boton.negro {
    background-color: #222; /* Negro tirando a gris oscuro */
    color: white!important;
}

.boton.negro:hover {
    background-color: #31495f; /* Gris azulado */
}

Solo tenemos que copiar la regla y añadir :hover al final, los cambios solo aplicarán mientras el usuario esté sobre el botón.

Y así queda nuestro botón:

Botón Negro con Efecto Hover

Un diseño distinto para tus botones

Este es otro tipo de diseño que últimamente se está viendo más, sobretodo promocionado por el framework de CSS: Bootstrap.

<a class="boton alternativo" href="#">Botón Alternativo</a>

En el CSS añadiremos lo siguiente:

.boton.alternativo { 
    background-color: transparent;
    color: #00c69f!important;
    border: 2px solid #00c69f;
    border-radius: 7px;
}

.boton.alternativo:hover {
    background-color: #00c69f!important;
    color: white!important;
    text-decoration: none;
}

Aquí he aplicado varias de las cosas que ya te he ido explicando en este post. Básicamente he aplicado el color turquesa a un borde de dos pixeles y al color de las letras, mientras que he dejado el color de fondo del botón como transparente.

Valdría también poner el fondo en blanco, pero si tu página no tiene el fondo en blanco entonces no se verá igual, la idea es que sea transparente.

También he añadido estilos CSS :hover para que se apliquen cuando mantenemos el ratón sobre el botón. Básicamente pintar el fondo de turquesa y cambiar las letras a color blanco. También le he quitado el “text-decoration”, que es cuando aparece una línea debajo del texto tal y como pasa en el ejemplo anterior de botón :hover. Si te gusta puedes dejarlo, a mi no me gusta como queda.

Total, que así quedará el botón alternativo al aplicarle el código:

Botón Alternativo

¡En fin! ¡Eso es todo por hoy!

Para cualquier duda no dudes en dejarme un comentario, que estas cosas al principio dan muchos dolores de cabeza. A mí me pasaba, pero cuando le coges el truco es una pasada el potencial que tiene el CSS.

Coméntame también si crees que me he dejado algo importante que te gustaría añadir a tus botones.

¡Hasta la próxima entrada!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>