Cómo hacer un botón para tu web con CSS3 y HTML5

Muchas veces cuando escribo artículos sobre diseño web y trucos para tunear o añadir funciones a nuestro sitio se nos olvida que somos una empresa de diseño web y que lo que para nosotros puede parecer muy sencillo, realmente para muchos seguidores y clientes puede ser empezar la casa por el tejado, por eso en este tutorial vamos a empezar por lo más básico en una página web el código HTML5 y CSS3.

Toda página web esta diseñada con estos dos lenguajes junto con otros como PHP y Javascrip, siendo el HTML y el CSS los principales en el aspecto visual. por lo que la mayoría de los elementos que vemos en una página web están diseñados con este código.

Por eso hoy te voy a enseñar cómo hacer un sencillo botón con código HTML5 y CSS3.

Lo primero que vas a hacer es un enlace simple para cualquier link que queramos añadir en nuestra página, utilizando el elemento <a> y donde la url de nuestra web será la página de destino de la página a la que queráis que vaya el botón.

<a href=”https://javiercallejo.net/contacto/”>Soy un botón de contacto</a>

Un enlace siempre tiene que incluir el atributo href que es el que le hace funcional y que nos redirija a la página que queramos. También podemos incluir el atributo target, para que la página de destino se abra en una página nueva del navegador e incluiremos también el atributo class que es con el que vamos a llamar a nuestro botón.

<a class=”miboton” href=”https://javiercallejo.net/contacto/” target=”_blank”>Soy un botón de contacto</a>

El elemento <a> ya tiene un estilo por defecto por lo que ahora veremos cómo podemos modificarlo con CSS y crear una clase para el botón.

Para ello vamos a nuestra hoja de estilo CSS y vamos a crear un botón al que añadiremos algunas propiedades cómo background para el color de fondo, padding para definir el espacio entre el texto y el borde del botón, o font-family para el tipo de fuente entre otras con el siguiente código.

/*Botón de contacto*/

.miboton {

font-family: arial;
font-size: 16px;
display:inline-block;
background: #cd382d;
padding:10px;
color: #ffffff;
text-align: center;
text-decoration:none;
}

Ahora sí guardamos nuestra hoja de estilo y refrescamos la página dónde hemos añadido el enlace con el atributo class veremos que este enlace se habrá convertido en un botón con las propiedades que hemos añadido.

Es muy importante poner correctamente los corchetes de apertura y cierre así cómo añadir ; detrás de cada una de las propiedades de no ser así nuestro botón se verá mal. Añade también /**/ para indicar dónde empieza el CSS del botón en la hoja de estilo y poder encontrarlo rápidamente en un futuro si quieres modificarlo.

También podemos añadirle el efecto hover con el que podemos definir qué hará nuestro botón cuando pasemos el ratón sobre el.

Para ello escribiremos:

.miboton:hover {

font-family: arial;
font-size: 16px;
display:inline-block;
background: #da7d76;
border-radius: 20px;
padding:10px;
color: #ffffff;
text-align: center;
text-decoration:none;
}

Y definir los cambios que queremos, en este caso estamos diciendo que cuando el ratón se sitúe sobre el botón este cambie de color y se redondeen las esquinas.

Ya tendremos hecho un botón totalmente funcional que deberá quedar así:

Soy un botón de contacto

Ya solo nos quedará jugar con él si queremos añadirle más propiedades, cambiar el color, el tamaño, la fuente de texto o tamaño o cualquier otra decoración que nos apetezca para qué quede perfecto en nuestra página web.