Cómo crear botones CSS
Uno de los elementos web más utilizados para navegar e interactuar en una página web o eCommerce son los botones. Desde el punto de vista técnico, los botones se pueden implementar directamente en código utilizando HTML o CSS, aunque los botones CSS permiten una mayor personalización para adaptarse al diseño y estilo de un sitio web.
Crear botones con HTML o con CSS
Crear un botón con HTML solo permite incluir un texto y un enlace hacia dónde lleva cuando el usuario hace clic o pulsa encima de él. Es necesario utilizar CSS para poder personalizar y darle al botón las propiedades necesarias para que muestre un aspecto visual atractivo. Incluso, es posible crear botones con iconos en CSS, para dotarlos de un aspecto más profesional y llamativo.
Para crear un botón en HTML hay que utilizar el siguiente código:
< a href = “URL del enlace”>Haz clic aquí. Este código muestra el texto “Haz clic aquí” con un enlace que lleva hacia la URL indicada.
Para personalizar ese botón y darle un aspecto llamativo se debe implementar código CSS, como por ejemplo:
< a class=”boton” target=”_blank” target=”_blank” href=”URL del enlace”>Haz clic aquí. Se crea el botón en CSS.
.boton {
padding: 10px 20px;
background-color: white;
color: #000000;
}
El código CSS anterior añadir propiedades especiales al botón como un margen (padding), un color blanco para el fondo, y un color negro para el texto.
Al buscar botones CSS para ejemplos, se pueden encontrar en internet infinidad de posibilidades de código con las que probar y testear los efectos que producen, para así adaptarlos a las necesidades personales.
Claves para crear botones con CSS
A continuación, ofrecemos una serie de recomendaciones o tips para poder crear botones con CSS totalmente personalizables.
Crear siempre el botón
Es importante crear primero el botón en CSS antes de comenzar a variar sus propiedades o atributos. Para ellos se utiliza la línea de código que vimos anteriormente:
< a class=”boton” target=”_blank” target=”_blank” href=”URL del enlace”>Haz clic aquí
Le asignamos un nombre al botón con la propiedad class para poder asignarle posteriormente sus propiedades o variar sus atributos. También se indica, tanto la URL hacia la que lleva el botón, como el texto que debe mostrar al usuario.
Personalizar el botón
Tras crear el botón, se puede empezar añadir sus distintas propiedades nombrándolo primero, siguiendo con una lista de los distintos atributos que se quieren variar. Como vimos en el anterior ejemplo, el código para personalizar un botón sería:
.boton {
padding: 10px 20px;
background-color: white;
color: #000000;
}
En la primera línea hacemos referencia a la clase del botón, de tal forma, que todas las propiedades que se añaden a continuación lo modificarán.
Colorear el fondo de los botones
Una de las partes características de un botón es su fondo, que es de distinto color al color del fondo de la página y del propio texto del botón, para así conseguir ese efecto de realce. Para variar el color de un botón en CSS se utiliza la propiedad background-color, seguida del color que se quiere utilizar, bien con el nombre del color (white, black, silver), con su código hexadecimal (#ffffff o #000000, por ejemplo), o el equivalente en RGB (rgb (255,0,0).
Asignar el color del texto
El otro color clave de un botón es el del texto que contiene. Para asignarlo se utiliza la propiedad color, seguida del color seleccionado.
Añadir un borde a los botones
Los bordes de un botón se pueden definir utilizando la propiedad border, como por ejemplo:
border: 1px solid #e24000;
En este ejemplo, podemos apreciar cómo asignamos un tamaño de un pixel para el borde de un botón de tipo sólido, con un color marcado por su código hexadecimal (naranja oscuro, en este caso).
El borde también puede tomar la forma típica redondeada de algunos botones web, para ello hay que utilizar el siguiente código CSS:
border-radius: 10px;
La propiedad border-radius es la que da la forma con esquinas redondeadas en un botón CSS.
Implementar el efecto Hover
Esta es una de las características esenciales de un botón, que se produce cuando se pasa el puntero del ratón por encima y cambia su aspecto. Con CSS es muy sencillo implementar el efecto hover para conseguir un botón con aspecto profesional.
.boton:hover {
background-color: #00c69f!important;
color: white!important;
}
En la primera línea indicamos que, para el botón al que llamamos boton, asignaremos a continuación sus propiedades cuando el usuario pase el ratón por encima, con la propiedad hover. Todos los atributos que se implementan a continuación, solo tendrán efecto cuando el usuario mueva el puntero por encima del ratón, desapareciendo cuando el puntero esté fuera de su área.
Hemos visto cómo crear un botón en CSS y cómo es mucho más flexible y personalizable que hacerlo con HTML, incluso hay mayor libertad creativa que utilizando plugins específicos para crear botones de WordPress u otro CMS.
CSS es un lenguaje de estilos con una curva de aprendizaje muy suave, por lo que es interesante aprender cómo funciona para poder crear botones personalizados para una web y conseguir que se adapten perfectamente al diseño y estilo.
