Create Buttons Using Text Boxes

Learn how to use a couple of text boxes to create a 2-state button.

Create the button

The first task in building this button is to add two text boxes. One will
represent the active state and the other the normal state.

In the Skin Editor:

1. Add one
   Text Box.

2. Duplicate that text box (copy and paste) to stack them on top of each other.

3. Draw a container around them.

4. Give one an ID of active and the other an ID of normal.

5. Now, tell the active textbox that it should only appear when a mouse rolls
   over it. In the Appearance panel, deselect Visible and add a
   logic block
   to the visible attribute:

   Trigger	Comparison	Value	Operation
   Mouse over parent	=	true	Visible: True

6. Test it by changing the background color of the active text box. Open the
   Live Preview and roll the mouse over the button. It should turn the color
   you chose.

Add a Roll Over Effect

Now it’s time to add some interactive effects.

1. Select both text boxes in the Tree. This allows us to add the following
   settings to both text boxes at the same time.

2. Change the background color to gray (or your color of choice).

3. Change the text color to white (or other contrasting color).

4. Test it. It’ll look like nothing is happening because both boxes are the
   same.

5. Add some CSS to add a drop shadow to the text to give it some depth. We will
   use text-shadow. Using the example from
   w3schools, copy
   the following to the to the CSS Styles Inner Element of the normal text
   box:

   text-shadow: 2px 2px #ff0000;
   

   This creates a shadow that is 2 pixels to the right and 2 pixels down.
   #ff0000 is the color of the shadow, which is red.

6. If you don’t want a red drop shadow or such a noticeable shadow, change the
   CSS to 1px 1px and swap ff with 00 to change the color to black.

7. Copy the normal button’s CSS Styles Inner Element and paste it to the
   active element.

8. Change the CSS to text-shadow: -1px -1px #000000;. The negative values
   reverse the shadow angle to 1 pixel left and 1 pixel up. This gives an effect
   of indentation.

See also…

• Webinar: Styling Skin Elements.
  Download a project example and see a working example of styled elements.