Cómo crear botones y personalizarlos con CSS

Los botones se han convertido en una parte fundamental para el blog, ya que estos no solo se usan para redireccionar al usuario a cualquier otra página, también es posible hacer que realice cualquier tipo de acción deseada, es decir, podemos darle un propósito a tal botón , como por ejemplo que, al hacer clic sobre él podamos activar algúna función, como que aparezca una ventana modal o cualquier otra cosa que se te ocurra.
En esta entrada de Ayuda Bloggers, podrás ver un ejemplo de lo que puede hacer un botón. Pero este tutorial no se verá enfocado a realizar cualquier actividad de lo anterior, si no a cómo crearlos utilizando un poco de CSS básico.
El botón que aprenderemos a crear será con un simple degradado y algunos efectos al pasar y al hacer clic con el cursor.
1. El HTML
Primeramente tendremos que darle un identificador a nuestro botón, para ello la estructura html de nuestro botón deberá contener el atributo "class", quedando de la siguiente manera:

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

La id que le pusimos a nuestro botón es "boton-css", y este se verá como cualquier otro tipo de enlace (por ahora):

2. El CSS
Ya asignado la id de nuestro botón, procedemos a darle los estilos correspondientes. Para ello tendremos que utilizar el identificador que le asignamos ("boton-css") a nuestro botón, de la siguiente manera:

.boton-css {
/* acá los estilos css */
}

2.1. Propiedades principales: Estas son algunas de las propiedades importantes que usaremos en nuestro botón y que lógicamente se deberán incluir.

• Propiedad "display": Debemos darle a nuestro botón un "esqueleto", para ello utilizaremos la propiedad "display" con valor "inline-block".


• Propiedad "margin": Para que nuestro botón no se apegue mucho al texto u otros elementos, tendremos que darle la propiedad "margin" con cualquier valor en pixeles que desees.


• Propiedad "padding": Para que exista un espacio entre el borde y el texto del botón, incluiremos la propiedad "padding" con cualquier valor en pixeles que desees.

Los valores que nuestro botón tiene sobre las propiedades anteriores, son:

.boton-css {
display: inline-block;
margin: 20px;
padding: 10px 30px 10px; /* Los valores "10px" hacen referencia al espacio entre el texto y el borde de arriba y abajo del botón, mientras que el valor del centro "30px" es el de los costados */
}

2.2 Propiedades secundarias: Las propiedades secundarias son aquellos que definen el aspecto del botón y algunos efectos.

• Propiedad "font-family":  Esta propiedad establece la fuente o tipografia. En Google Fonts, podrás encontrar cientos de fuentes, que podrás utilizar en tu sitio.


• Propiedad "text-align": Como su mismo nombre lo dice "text (texto)" y "align (alineamiento)". Es el alineamiento del texto en el botón, puedes alinearlo como quieras.


• Propiedad "border-radius": Desde que añadimos un color de fondo, este siempre será rectangular, por lo que con esta propiedad, podemos controlar el redondeado en las esquinas, como lo hice con el botón.


• Propiedad "background": El color de fondo es esencial para darle a nuestro botón un aspecto más llamativo, y es que no sería un botón si no tiene un color de fondo. Para incluirlo debemos utilizar la propiedad "background" con el valor del color que desees. Recuerda que debes utilizar colores hexadecimales, es decir, encontrar el color deseado y copiar el código que se muestra en letras y números. Ejemplo: el color hexadecimal rojo es "#FF0000". Para este botón he utilizado esta propiedad, pero no con el valor que comunmente se suele utilizar, ya que se trata de un fondo degradado, he repetido las propiedades pero con valores distintios, por la razón que algunos navegadores no muestran el degradado que le damos a nuestro botón, y otros si.


• Propiedad "color": Esta propiedad se aplica al texto del botón, si utilizamos un color oscuro en el fondo, el color más recomendable sería el blanco (#fff), y un color oscuro o negro (#000) si utilizamos de fondo un color claro.


• Propiedad "text-decoration": La propiedad "text-decoration" se usa para establecer la decoración del texto, como subrayado, parpadeo, etc. En este botón no utilizaremos ninguna decoración, por lo que se ha puesto el valor "none".


• Propiedad "transition": Con esta propiedad podemos hacer animaciones, es decir, que ciertas propiedades cambien con una ligera animación.

 
Con los atributos principales y secundarios, el CSS de nuestro botón se debería ver de la siguiente manera:

.boton-css {
font-family: 'Raleway', sans-serif;
text-align: center;
border-radius:7px;
display: inline-block;
margin: 20px;
padding: 10px 30px 10px;
background-color: #B81717; /* Para navegadores que no soportan el degradado */
background: -ms-linear-gradient(top, #DA2929, #A20E0E); /* Internet Explorer */
background: -webkit-gradient(linear, from(#DA2929), to(#A20E0E)); /* Internet Explorer */
background: -moz-linear-gradient(top, #DA2929, #A20E0E); /* Chrome */
background: -webkit-linear-gradient(top, #DA2929, #A20E0E); /* Firefox */
background: -o-linear-gradient(top, #DA2929, #A20E0E); /* Opera */
text-decoration:none;
color:#fff;
transition: 0.3s;
}

Y, el aspecto de este será:

Ya definido el aspecto general de nuestro botón, tendremos que hacer que este tome uno diferente al pasar el cursor sobre él, por lo que usaremos lo siguiente:

.boton-css:hover {
/* Propiedades al pasar el cursor */
}

Al definir la propiedad "transition", le damos un efecto de animación al aspecto que tendrá al pasar el cursor y al hacer clic sobre él. Y ese efecto lo tomó "border-radius" como unica propiedad hover.

.boton-css:hover {
border-radius:7px 15px 15px 7px; /* El primer y ultimo valor (7px) son las esquinas izquierdas del botón, mientras que los sobrantes (15px), son de la derecha */
}

Al pasar el cursor sobre nuestro botón, tendrá la siguiente transición: (prueba pasando el cursor sobre él)

También hicimos que nuestro botón tome un aspecto diferente al hacer clic sobre él, para darle un aspecto más profesional.

.boton-css:active {
/* Propiedades al hacer clic sobre él */
}

Le dimos el mismo efecto de degradado, pero con los colores invertidos. También utilizamos la propiedad "box-shadow", simplemente hace que el botón tenga sombras. Y por ultimo, hicimos que desaparezcan las esquinas redondeadas, utilizando el valor "0px" en la propiedad "border-radius".

.boton-css:active {
background-color: #143DE3;
background: -ms-linear-gradient(top, #08228B, #143DE3);
background: -webkit-gradient(linear, from(#08228B), to(#143DE3));
background: -moz-linear-gradient(top, #08228B, #143DE3);
background: -webkit-linear-gradient(top, #08228B, #143DE3);
background: -o-linear-gradient(top, #08228B, #143DE3);
box-shadow: 0px 0px 5px #475685;
border-radius:0px;
}

Y, juntando todo lo anterior, obtendremos un botón así: