Web development tutorial

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, CSS, Design, Dreamweaver

0 ratings | Sign in to rate this tutorial | View comments

Print tutorial
Share this tutorial

CSS Button Styler allows you to quickly design your own custom CSS buttons for using on the websites you develop. This Dreamweaver extension exposes all the various CSS properties you can apply to a CSS button along with the ability to save styles for all of the websites you create.

next section

Requirements

You will need the following items before starting this tutorial:

Dreamweaver CS4 or later
CSS Button Styler installed
Site defined in Dreamweaver

next section

Choose your preset

CSS Button Styler starts by asking you to choose a preset to start with. A number of presets have been provided for you to save time over desinging your button from scratch. Any preset can be further modified to suit your exact needs.

Step 1: Launch the interface

To launch the interface, first open a page from your Dreamweaver website where you would like to insert a button.

From the WebAssist menu, choose CSS Button Styler > Insert CSS Button.

Step 2: Choose a preset

From the Preset menu, choose a preset that you would like to start with.
It is recommended that you select a preset that most closely matches the style you are aiming to achieve. Then, make any specific changes through the edit interface.
If you wish to design your button from scratch, choose the <New from Blank> option.
Choose how you wish to store the CSS for your buttons:
1. Insert button CSS in this document only
  Will insert the CSS for your button into the <head> of your current page.
2. Insert button CSS in a CSS file
  Will insert your button CSS into a CSS style sheet that you specify. If the style sheet you specify does not exist, it will be created for you.
Select the Edit (pencil icon) next to the Preset dropdown to launch the Edit button interface.

Styling your buttons

The Edit button interface allows you to define all the CSS properties for your CSS buttons. This includes options for the Type, Background, Block, Border, Box, Outline and Mouse Over.

Start by specifying the CSS properties for your button text from the Type category. Once you have defined the settings you would like to use, move onto the next category to make changes that you would like.
Continue making changes for each available category until you have completed styling your buttons.
For assistance with a particular category, choose the Help button from within the interface to view details on how each CSS property works.
Refer to the live preview to see the final appearance of your button.
Some effects such as Shadows, may not appear properly in the live preview. Before saving this preset, you might want to preview the button in your browser to confirm you are satisfied with the style.
When you are finished, click OK.
When prompted to save a preset, select the checkbox and enter a name for the preset you have just created.
This will allow you to re-use this preset for other website's in the future.
Once you return to the main interface, click OK to insert the button to your page.

Your CSS button has now been created and inserted to your page. CSS Button Styler will remember this preset for the site you inserted the button to, making it quick and easy to add other buttons to this website as you continue development.

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments

0 ratings | Sign in to rate this tutorial

Getting Started with CSS Button Styler

Step 1: Launch the interface

Step 2: Choose a preset

Build websites with a little help from your friends

Build websites from already-built web applications

Want your website pre-built and hosted?

Everything else!

U.S. 858.201.4911 | International +1.858.201.4911

We've earned your trust.

Connect with us.