Cómo crear botones con css sin escribir código.

Exiten en Internet un montón de artículos que explican como crear botones usando solamente CSS pero lo que voy a contar es como crear botones mediante css sin escribir una sola línea de código.

Para realizar el botón lo primero que vamos a hacer es el elegir el color que queremos que tenga. Para ello nos vamos a ayudar de 2 webs: Colour contrast check y 0to255.

La primera web nos sirve para comprobar que los colores que vamos a elegir para el texto y para el fondo del botón cumplen con los estándares de accesibilidad. En Libuku se usa el color #5B7901 (un tipo de verde) como fondo y #FFFFFF (blanco) para el texto de manera que si comprobamos su accesibilidad obtenemos que WCAG 2 AA pero no con el nivel AAA. Como yo sólo quiero cumplir con el nivel AA de accesibilidad me sirven estos 2 colores.

Ahora, a partir del color principal del fondo vamos a obtener el resto de colores para el botón: el color de los bordes y el necesario para el degradado del fondo. Para ello vamos a la web 0to255 y seleccionamos nuestro color de fondo. De esta manera obtendremos la gama de colores para nuestro botón verde.

Por último ya sólo nos queda obtener el código del botón. Para ello haremos uso de Button Maker. Ahora sólo debemos selecionar los colores que queremos para cada cosa y la web nos devolverá el código CSS para nuestro botón.

Los colores serán:

  • Top Gradient Color: Nuestro color de referencia #5B7901
  • Bottom Gradient Color: El color +3 de 0to255. En nuestro caso #81ac01
  • Top Border Color: El color +4 #8ebc02
  • Text Color: El color del texto. En nuestro caso #FFFFFF
  • Hover Background Color: El color -1 #4e6801.
  • Active Background Color: El color -2 #425701

Si has seguido estos pasos y pulsas en el botón Fancy View Source obtendrás el código de tu botón.

Este método es el que he usado para crear el botón de Descargar de Libuku; por lo tanto, podéis ver el resultado de como queda en la página de cualquier libro como, por ejemplo, La cautiva; aunque yo después he modificado un poco el código CSS para dejarlo más acorde a mis gustos.

ADVERTENCIA: Este método usa propiedades de CSS3 por lo que sólo funcionará en navegadores modernos. Si quieres que también funcione en navegadores antiguos sería recomendable usar alguna librería javascript que simule CSS3 como IE7.js, IE-CSS3, eCSStender, etc.

Etiquetas: , , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: