CSS Buma - Generador de botones CSS para menú de navegación.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

CSS Buma es una completa herramienta gratuita para generar menús y botones mediante código CSS.

Con esta utilidad podrás crear y diseñar los botones sin saber absolutamente nada del lenguaje CSS, solo configurando los parámetros y propiedades desde la interfaz del programa se podrán crear los botones: el color del texto de los enlaces, indicando la dirección url de la página al hacer clic, el fondo del botón, y varias otras propiedades.

A continuación puedes ver cómo funciona esta herramienta gratis de diseño web.

Mas información sobre el programa.

Indice - Contenido.

Ejemplos menú y botones que se pueden crear con este programa.
Crear nuevos botones para la barra de navegación.
Editar las opciones de los botones de menú.
Modificar la apariencia y opciones de enlace.
Hacer una vista previa de los botones, código CSS y HTML.
Trabajar con plantillas.

1 - Ejemplos de botones que se pueden crear con este programa.

Antes que nada, puedes ver en las siguientes imágenes, algunos de los posibles menú que son posibles crear con el programa.

Estos menú en CSS, son archivos de ejemplo que ya incluye en la carpeta examples y los puedes abrir presionando en el menú File > Open. ( Son los ficheros example_001.btm, example_002.btm, example_003.btm, etc ...)

Nota: Esto son sólo 4 de los 21 archivos de ejemplo que contiene.

Menú 1.

Menú de navegación 2.

Menú de navegación 3.

Ejemplo 4.

2 - Crear nuevos botones para la barra de navegación.

Para comenzar y poder crear nuevos botones se debe seleccionar el menú File > New donde se abrirá la siguiente ventana o diálogo:

Luego podrás editar el texto del mismo, los enlaces de cada uno de ellos y otras opciones . Antes de seguir con el diseño, es recomendable que guardes el proyecto con un nuevo nombre en una carpeta de tu disco duro.

3 - Editar las opciones de los botones de menú.

Desde la opción o pestaña Buttons Captions podemos agregar los nuevos botones del menú. Sólo basta con seleccionar el botón en la lista, y en el campo de texto inferior escribir el caption y el enlace a la página HTML, PHP o ASP que necesitamos abrir.

Nota: Por defecto el programa añade 3 botones, pero puedes añadir e insertar todos los que quieras desde la opción que se encuentra en la barra de herramientas > Create New Button, como se ve a continuación.

4 - Modificar la apariencia y opciones de enlace.

En el panel inferior se encuentran varias opciones para definir la apariencia de los botones y del menú.

Propiedades de link : Se puede definir el color del enlace, el estilo de fuente, el color de fondo, los márgenes, el centrado del enlace, el alto y ancho de los botones. También desde esta ficha podemos definir si el menú será vertical u horizontal, añadir y definir los bordes

Link Hover y Visited.

Opciones para las propiedades de los links al pasar el mouse por encima y para el enlace visitado.

5 - Hacer una vista previa de los botones, código CSS y HTML.

Para ver como se ve nuestro diseño del menú actual, puedes pulsar en la pestaña vista previa de botones ( Preview buttons). Al hacer esto el programa generará automáticamente el código CSS y HTML, y hará visible los botones.

También es posible visualizar el código HTML y CSS desde las respectivas pestañas.

6 - Trabajar con plantillas.

CSS Buma tiene la posibilidad de trabajar con plantillas. el uso de plantillas facilita el trabajo y diseño de posteriores trabajos de creación de menú.

Al terminar de trabajar con un proyecto y guardarlo, todas las propiedades de los botones se almacenan y no se pierden. Es decir, que al trabajar con una plantilla, los colores y todas las propiedades, excepto el nombre de los botones y los enlaces, se guardarán para un posterior uso.

Para crear una plantilla, se debe pulsar el botón Guardar plantilla en la barra de herramientas o desde el menú File > Save Template, donde se abrirá un cuadro de diálogo para guardar la nueva plantilla ( Es un archivo con extensión .bbt)