At the top of the Button panel, you’ll see controls for your button’s type and contents. You can choose between Text, which will give you the same options as seen in text above:

Or Image, which will let you make icon-based buttons:

Below this, you’ll find controls for the button’s regular, highlighted, and pressed states:

For each, you can define either or both of a color and a texture (image). These determine what will be shown behind the button contents defined above. If you choose both a Color and a Texture, the Color will tint the texture. Note that you can use an Image backer even if you’re using a Text button type.

Tips and Tricks for Using Texture Backers

Using images for your button backgrounds can be a powerful tool to make buttons that look great, but you’ll want to be aware of a few things:

• If you want your backer image to display at a specific size, the easiest way to do that is to add a Layout Box on the button. (See Borders and Layout Boxes)
• There’s a Texture entry for each state to give you maximum control over the appearance of your button; often you can produce really nice-looking rollover states this way. However, if you only have one button image, and wish to rely on color tinting to indicate its Highlighted and Pressed states, you’ll need to input your image into all three fields; otherwise it’ll revert to a simple color backer on rollover.
• If you’ve created a button image that stands alone (ie, that has the text and/or image you want to display baked into the image), you’ll want to make the Button type Text, and then just leave the text field blank.

Example

In Photoshop, I’ve created a Setup button image and a Setup Highlighted rollover state. I rendered the text in Photoshop so I could get the specific effects on it I was looking for.

In TTP, I set my Button Type to “Text” and clear the Text field, then import my base button in the Image field for “Regular.” At first, my button looks scrunched and weird (it’s in the top-right of the image below), because it’s defining its size based on the empty Text field.

To fix this, we add a Layout box to the button, and set its width and height to the image’s native dimensions (which you can see me verifying via the Windows “Properties” dialogue in this screenshot). Voila, our button looks correct:

Now we can add our second image in the “Highlighted” field, and voila: On mouseover, our button switches to the Highlight image, thus appearing to light up:

We’re not done though, because if we don’t edit the “Pressed” field, then when someone clicks the button it’ll look like this:

So we’ll just add our base button texture in there again. If we want, we can even apply a color tint to it to change it up a little:

Scripting Your Button

To make your button do something, you’ll need to add a script to it. Below is a simple example script to get you started. For details see Adding Scripts to UIs.