Creating rollover images
In this recipe we will create an image to use in a rollover effect when hovering over a button. We will use the button design from the previous recipe and create two more design variations to serve as hover and active button states.
How to do it...
The following steps will demonstrate the creation of rollover images:
1. Open the
CSSslidingDoorsShadow.svgfile accompanying this chapter.2. Change the Display mode to Outline (Ctrl + 5), select the button and the rectangle from Step 17 in the previous recipe, and copy them (Ctrl + C). Create a new document (Ctrl + N), turn on the Grid (#), place the mouse cursor near the top center of the page and paste (Ctrl + V). The objects will be pasted snapping to the grid so we don't need to adjust their position. Save the file (Ctrl + S).
3. Change the Display mode to Normal (Ctrl + 5).
4. Zoom in on the left button part. Select the group that holds the button, duplicate it (Ctrl + D) and move down while holding Ctrl, and let it...
