Richzendy.org

Una de las cosas que symfony como framework no tiene ( y no tiene por que tenerlo ) y que toda aplicación debe tener, es un set de botones coherente, liviano, simple, con código reutilizable y atractivo.

Teniendo tiempo buscando una solución para esto me encontré con múltiples opciones que no eran funcionales por que implicaban diseñar una imagen por cada botón, o era un diseño muy simple, o una etiqueta CSS por cada botón, o usaba javascript ( lo cual no es muy accesible ), pero a la final la perseverancia dio resultados y me conseguí este método de hacer botones y que era justo lo que estaba buscando y además funciona muy bien con cualquier navegador.

Acá voy a explicar como se usa en el framework symfony, sin embargo lo puedes adaptar a cualquier aplicación web.

Primero creamos un archivo css, llamado buttons.css y lo metes en el directorio web/css con el siguiente contenido:

/* BUTTONS */

.buttons a, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

/* STANDARD */

button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* POSITIVE */

button.positive, .buttons a.positive{
    color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative{
    color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.buttons a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}

Para darle un carácter de individualidad a sus botones se necesita colocar una pequeña imagen o icono a un lado y para ello nos bajamos el arsenal de 700 iconos 16x16px de FAMFAMFAM los cuales solo ocupan 1mb y además son libres de usar ya que tienen licencia Creative Commons Attribution, el archivo que nos descargamos lo extraemos y la carpeta icons la pasamos íntegramente al directorio web/images/

Ahora pasamos al código de nuestra aplicación, donde vayamos a usar un icono debemos incluir el archivo css, sin embargo si lo van a usar en la mayoría de vistas sugiero que lo incluyan en el archivo layout.php en mi caso lo tengo en app/frontend/templates/layout.php, simplemente agregamos la siguiente linea en la parte superior, debajo de todos los css que hayas declarado:

<?php echo stylesheet_tag(‘buttons’) ?>

Luego de esto ya podemos hacer disposición de usar nuestros botones en la vista

Por ejemplo en un formulario podríamos hacer lo siguiente, sustituyendo el código del botón por defecto y del enlace de cancelar:

 Cancelar

  Guardar

El class negative hace que el rolover dle botón sea de color rojo, el class positive hace que el rolover del botón sean verde y si no declaran ninguna clase, el rolover del botón sera en un bonito color azul claro.

Si quieren saber más al respecto, pueden visitar el enlace que tome como referencia en:

http://particletree.com/features/rediscovering-the-button-element/

Articulos Relacionados:

1. Editando templates de formularios en Symfony 1.2 Normalmente los formularios en Symfony se muestran con un poco...
2. Graficando tu esquema de base de datos en Symfony Una de las cosas que más aburren y fastidian a...
3. eclipse+symfoclypse+symfony+clay en fedora 9 Bueno esto más bien es un tutorial de instalación de...