Aprende como crear botones estilo flat con CSS utilizando iconos.
El diseño plano mejor conocido como flat design se ha convertido en una tendencia a nivel global, es una etapa de la web y los dispositivos en la que todo tiende a ser minimalista, asi que hoy vamos a aprender con este tutorial como hacer botones flat a partir de enlaces utilizando CSS. Pero no solo vamos a estar creando los típicos botones de todo sitio web, ademas del texto de nuestros botones vamos a dotarlos también con iconos que complementen la experiencia de usuario de nuestros botones.
Para este tutorial vamos a estar utilizando una técnica llamada OOCSS que nos permite reutilizar código y que para el ejemplo de este tutorial nos facilitara mucho las cosas. Si quieres echar un vistazo a los fundamentos de OOCSS te dejo este articulo que he escrito:
Introducción y fundamentos de OOCSS (Oriented Object CSS)
Este es el resultado de los botones flat que estaremos creando:
https://www.falconmasters.com/demos/botones_flat
Tutorial como hacer botones Flat usando iconos con CSS
Código HTML
<!-- Botones Chicos --> <a href="#" class="button blue"> <span class="icon-house"></span>Inicio </a> <a href="#" class="button yellow"> <span class="icon-warning"></span>Advertencia </a> <a href="#" class="button"> <span class="icon-code"></span>Codigo </a> <br> <!-- Botones Medianos --> <a href="#" class="button blue medium radius"> <span class="icon-house"></span>Inicio </a> <a href="#" class="button yellow medium radius"> <span class="icon-warning"></span>Advertencia </a> <a href="#" class="button medium radius"> <span class="icon-code"></span>Codigo </a> <br> <!-- Botones Grandes --> <a href="#" class="button blue large"> <span class="icon-house"></span>Inicio </a> <a href="#" class="button yellow large"> <span class="icon-warning"></span>Advertencia </a> <a href="#" class="button large"> <span class="icon-code"></span>Codigo </a>
Código CSS
/*Estilos Generales*/
.button {
background:#7f8c8d;
color:#fff;
display:inline-block;
font-size:1.25em;
margin:20px;
padding:10px 0;
text-align:center;
width:200px;
text-decoration:none;
box-shadow:0px 3px 0px #373c3c;
}
.button span {
margin-right:10px;
}
/*Colores*/
.button.blue {
background:#3498db;
box-shadow:0px 3px 0px #266792;
}
.button.yellow {
background:#e67e22;
box-shadow:0px 3px 0px #b55704;
}
/*Tamaños*/
.button.medium {
width:350px;
}
.button.large {
width:450px;
}
.button.radius {
border-radius:50px;
}
/*Efectos, Hover*/
.button:hover {
box-shadow:0px 0px 0px;
padding-top:7px;
}
Es importante que tengas en cuenta que este es el código que utilizamos en el tutorial, pero también tenemos que cargar las fuentes de los iconos para poder utilizarlas, si no lo haces no cargaran y no funcionara. Para eso te dejo el tutorial previo el que aprendemos a utilizar iconos para sitios web mediante fuentes.
Tutorial como utilizar iconos para sitio web mediante fuentes y CSS:
https://www.falconmasters.com/web-design/como-utilizar-iconos-para-sitio-web-y-css/
Paleta de colores flat para User Interface:
https://www.falconmasters.com/web-design/recursos/paleta-de-colores-flat/
Icomoon: http://icomoon.io/
[…] Link: Tutorial como hacer botones Flat usando iconos con CSS […]
Muy buen tutorial felicitaciones !!! Tengo varias dudas…necesito hacer los botones responsives, ademas de la sombra en vez de abajo colocarla encima del boton, y que cuando clique me lleve a una url especifica..podrias ayudarme.
Muchas gracias y felicitaciones
donde descargo el ZIP FalconMarters?