DanteCervantes.com

Crear botones tipo flat con CSS3 y SCSS

Publicado por : Dante | 7 marzo, 2015 | 7:23 am

 

Hoy en día la web está cubierta por esta tendencia, es por ello que les comparto unos botones al estilo flat, con un poco de animación por hardware con CSS3, puedes ver el resultado final aquí.

Para comenzar necesitaremos un elemento (div) que contenga a nuestro botón, para poder darle un pequeño borde.

Seguido de esto necesitamos añadir un enlace / botón, en este caso utilizaremos un enlace.

Una vez hecho esto, procedemos a darle diseño a nuestro botoón.

Centraremos el texto y le daremos un tamaño proporcional al tamaño de la pantalla para poder centrar el elemento, digamos un 30%, para centrar el elemento añadimos el atributo “margin” el cual nos permite establecer márgenes superior, inferior, izquierdo y derecho, de igual forma agregamos un padding interior de 10px para dejar el espacio entre el borde exterior y el color de fondo de nuestro botón.

Seguimos con el diseño del interior de nuestro botón.

Para que nuestro enlace no tenga ese molesto subrayado, agregamos la directiva text-decoration, haremos que la tipografía esté completamente en mayúsculas con text-transform:uppercase, le aplicamos un color a la letra con color, así como un tamaño font-size, y el margen exterior padding para que nuestro color de fondo de separe de la tipografía, para que nuestro botón se acople al tamaño de nuestro contenedor y no solo a donde el tamaño de la letra termina, añadimos la directiva display:block, esto hará que el enlace sea “clicleable” desde nuestro contenedor.

Seguido añadimos una clase para nuestro color de botón en este caso será de color rojo, añadimos un borde a nuestro contenedor y a nuestro enlace le daremos un color de fondo y un color a la tipografía.

Esto nos dará como resultado algo como esto.

Conclusión

La Web cada vez abarca más y más las tendencias del diseño, ya que con las herramientas y tecnologías que diariamente se crean, podemos lograr resultados realmente asombrosos.

Recibe los mejores desarrollos y tutoriales

* campos requeridos

redes sociales