close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Getting Started with CSS Button Styler

Tutorial created by Team WebAssist

Categories: Data Bridge, CSS, Design, Dreamweaver

rating

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.

arrow downRequirements

You will need the following items before starting this tutorial:

  1. Dreamweaver CS4 or later
  2. CSS Button Styler installed
  3. Site defined in Dreamweaver

arrow downChoose 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.

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

Step 2: Choose a preset

  1. 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.

  2. 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.


  3. Select the Edit (pencil icon) next to the Preset dropdown to launch the Edit button interface.

arrow downStyling 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.

  1. 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.
  2. 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.

  3. 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.

  4. When you are finished, click OK.
  5. 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.
  6. 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.

arrow downReviews 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
rating

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.