---

---

Media Lab Home > SiteGrinder Home > Feature Overview > Buttons

Create Buttons with Rollovers and Popups

SiteGrinder can create buttons with images, text, or a combination. Both use the very straightforward "button" hint added to their layer names.

Graphical Buttons

A graphical button is just a graphic on a web page that does something when you click on it and, if you choose, changes appearance when you roll the mouse pointer over it. Roll over the button to the left to see an example. This button was made with two Photoshop layers: one for the normal state when nothing is happening to it another for the way it should look when the mouse rolls over it.

SiteGrinder knew to program a button from these layers via one of SiteGrinder’s simple layer naming schemes. A graphic layer will become a button if it’s name ends with “-button”. We call this a SiteGrinder hint. It will have a special appearance when rolled over if another layer has a name that matches the first button’s name but ends with “-rollover” instead of “-button”.

Here are the layers in Photoshop for the button to the left. (Normally the rollover is directly on top of or underneath its button. We moved it so you can see both at the same time.)

That’s all it takes! Because both buttons were named “Click me” followed by a SiteGrinder hint, SiteGrinder matched them up and made a button out of them when it built the page. To add popups we just add one or more layers named “Click me-popup”. Each one will be hidden when the page first loads in the browser and will appear when the user rolls the mouse pointer over the “Click Me-button” layer.

Text Buttons

Text buttons use real, live styled web text instead of images. They are created similarly to image buttons, using type layers with the "button" hint, with the exception that the rollover effects are set in the SiteGrinder window instead of with a "rollover" layer. This is both easier and allows for the fact that web browsers support many different text rollover styles that Photoshop text layers don't.

Here are some samples you can roll over:

Click here to learn more about SiteGrinder buttons