Pin Me

How to Create a Glass Button Menu in WYSIWYG Web Builder

written by: Amanda Presley•edited by: Michele McDonough•updated: 7/5/2011

Glass Buttons are a big hit with web designers. They really make a page stand out and look professional. In WYSIWYG Web Builder, you can quickly create these glass buttons. In this tutorial, I will show you how to create the glass buttons using Web Builder.

  • slide 1 of 1

    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 - finished 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 ButtonsWYSIWYG 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.