Commençons par créer un nouveau document possédant les propriétés suivantes :
- Largeur : 125px
- Hauteur : 25px
- Résolution : 72 pixels/pouce
- Contenu de l'arrière plan : Blanc

La taille définie ici est adaptée à l'exemple mais vous pouvez bien sur créer des boutons aux dimensions que vous souhaitez. La méthode pour obtenir cet effet reste la même quelle que soit la taille.

Tracer un bouton sur votre calque (cf. tutorial "bouton aqua", par exemple)

Faites un clic droit sur votre bouton puis cliquez sur "convertir en symbole" et définissez le (vous pouvez lui donner le nom que vous souhaitez)

Maintenant, prenez l'outil "Pointeur" et double-cliquez sur le bouton.
Vous remarquerez différents onglet représentatif de chaque état du bouton.
Nous allons compléter ces onglets un par un. Seul l'onglet "Au-dessus enfoncé" ne nous sera pas utile pour la conception d'un bouton; cet état est utilisé pour les barres de menu.

Mais avant de commencer cliquez sur chaque onglet (sauf "Au-dessus enfoncé") et cliquez sur "Copier le graphisme... " afin d'obtenir 3 états identiques et une zone active qui ne recouvre que le bouton.

Pour donner l'impression que ce bouton "survole" notre page nous allons lui appliquer un effet "ombre portée" avec les paramètres suivants :
- couleur : #000000
- Distance : 6
- Opacité : 65 %
- Adoucissement : 4
- Angle : 315°

Commencez par cliquez sur "Copier le graphisme Relevé" pour récupérer l'ombre portée.
Nous allons changer la couleur du bouton de cet état afin que sa teinte varie lorsque l'internaute place sa souris sur le bouton.
Appliquer lui l'effet "Teinte / saturation" avec les paramètres suivants :
- Teinte : 200
- Saturation : 50
- Luminosité : 0

Pour cet état, nous allons simplement lui appliquez l'effet "Teinte / saturation" avec les paramètres suivants :
- Teinte : 360
- Saturation : 50
- Luminosité : 0

La zone active est "la zone sensible" qui déclenchera le changement d'état du bouton selon le comportement de la souris. Vous pouvez la définir sur le bouton, comme dans cet exemple, ou en dehors du bouton selon le résultat que vous souhaitez obtenir

Vous pouvez également renseigner les champs "Lien", "Alt" et "Cible" si vous les connaissez déjà (sinon pas de panique vous pourrez les compléter plus tard) :

Vous pouvez maintenant cliquez sur "Terminé".

Cliquez sur "Edition" et "recadrer le document" pour inclure l'ombre portée au graphique.

Il suffit maintenant d'exporter le document : cliquez sur "Fichier" puis sur "Exporter".
Paramétrez la fenêtre d'exportation en prenant soin de cocher "Placez les images dans des sous-dossiers".

Lors de l'exportation Fireworks créera automatiquement un dossier contenant les différentes images et une page au format html contenant un Javascript et le code html du bouton.

Il ne vous reste plus qu'a l'adapter à votre page web pour inclure le bouton sur votre site !