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:

Add one Text Box.
Duplicate that text box (copy and paste) to stack them on top of each other.
Draw a container around them.
Give one an ID of active and the other an ID of normal.
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 | | ||
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.

Now it’s time to add some interactive effects.

Select both text boxes in the Tree. This allows us to add the following settings to both text boxes at the same time.
Change the background color to gray (or your color of choice).
Change the text color to white (or other contrasting color).
Test it. It’ll look like nothing is happening because both boxes are the same.
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.
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.
Copy the normal button’s CSS Styles Inner Element and paste it to the active element.
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.