Hace unas semanas escribí sobre diseño web sensible y grids css y no mencioné Twitter Bootstrap porque en ese momento andaba por la versión 1.x y todavía no era sensible (responsive).

Al poco tiempo la gente de Twitter liberó la versión 2 de este excelente framework html+js+css y añadió soporte para dispositivos móviles, lo que me convenció para probarlo y hace poco he tenido la ocasión de usarlo en un pequeño proyecto en mi trabajo del Mundo Real ™.

Tengo que reconocer que, aunque hay partes que siguen sin gustarme de la idea de los grids css, la experiencia ha sido muy positiva. Un problema al que me he enfrentado es poder utilizar botones que quedasen bien con el aspecto general de Bootstrap pero usaran colores más “corporativos”.

Ajustar el CSS de Bootstrap para cambiar el aspecto de los botones no es una tarea complicada pero sí un poco tediosa, por lo que decidí hacerme una pequeña herramienta que me ayudara a ello y aquí está el resultado:

BBG: Bootstrap Button Generator

BBG es una aplicación muy básica y sencilla para generar nuevos tipos de botones ajustados al estilo de Bootstrap. Usando unos cuantos color pickers puedes elegir los colores que se usarán en los degradados de los botones y crear así botones personalizados.

Para evitar sobreescribir los estilos de botones incluidos en Bootstrap, BBG permite asignar nuevas clases css a los botones que vayas creando:

Bootstrap Button Generator

Una vez que has creado el botón que necesitas, sólo tienes que incluir el código css generado por BBG y podrás añadir botones y enlaces a tu página:

<a href="#" class="btn my-new-button-class">Sample link>/a>

En github puedes encontrar el código fuente completo de BBG por si tienes curiosidad por ver cómo está hecho, aunque ya te adelanto que no tiene mucha historia, el mérito real es del plugin jQuery MiniColors.

Si quieres probarlo, aquí puedes jugar con Bootstrap Button Generator.