WYSIWYG Web Builder: How to Create a Glass Button Menu

WYSIWYG Web Builder: How to Create a Glass Button Menu
Page content

WYSIWYG Web Builder is a great program to use for creating glass buttons. Creating glass buttons in this program is very simple. You only need to select your colors and fill in the links. This tutorial will show you how to create glass buttons. Open WYSIWYG Web Builder and create a new page to work on.

WYSIWYG Web Builder - how to create a glass button menu - adding buttons navigation

Adding the Buttons to the Page

The first step is to add the glass buttons to the page. In the toolbox on the left, you will see the Navigation panel. If the panel is not expanded, go ahead and expand it by clicking the plus sign. Then click the Tab Menu button. Using your mouse, draw a rectangle on the page. You will notice the buttons appeared.

Creating the Glass Buttons

WYSIWYG Web Builder - how to create a glass button menu - style properties box

Now, we will change the settings of the button to create the glass buttons. Right click on the buttons and click Properties in the menu that drops down. That will open the Tab Menu Properties box. In the properties box you will see two tabs. Click the Style tab and we will create the glass buttons before adding the link to each button.

In the Style box you will see all of the different options. Start off by selecting a style. This is how the glass buttons are created. Not all of the styles are glass buttons, so you will have to go through the styles and see which ones are and which one you want to use. The buttons in my image are created using Style2. You are free to look through the styles and find the one that you like.

After you have chosen your style, you can change the properties for the text. You can change the font type, size, and color. You will also see three columns of options for your links. The first column is normal, the second is hover, and the third is active. Tick any of the fields that you want to apply to the buttons.

WYSIWYG Web Builder - how to create a glass button menu - general properties box

Linking the Glass Buttons

After you have created the buttons, click the General tab. In this box you can create your links and link them. Click the items that are in the window and click the Remove button on the right to delete them. Click the Add button to start adding your own buttons. When you click the Add button, the Add Button box will open. Type in the name of your button, the link, how you want the link to open, and then click OK. Click the Add button again and repeat the above steps. Continue adding your links until you have them all added. Then click the OK button on the properties box.

Now you are finished. You will see your glass buttons on the page. You can move the buttons around by dragging them to where you want them.

This post is part of the series: WYSIWYG Web Builder

WYSIWYG Web Builder is a program for designing websites. In this series you will learn how to use Web Builder and how to create the different things in Web Builder.

  1. How to Create Status Messages in WYSIWYG Web Builder
  2. Add a Photo Slideshow to Your Website Using WYSIWYG Web Builder
  3. Add Free Java Clocks to a Website
  4. How to Use the Free Rollover Buttons in WYSIWYG Web Builder
  5. Creating a Marquee for Your Website With WYSIWYG Web Builder
  6. WYSIWYG Web Builder: Creating your Own Paypal Buttons for your Website
  7. How to Create a Glass Button Menu in WYSIWYG Web Builder