Creating a button to use with the CSS Sliding Doors technique
In this recipe we will create an image of a button that can be used with the popular CSS "Sliding Doors" technique, so that it automatically resizes with the text. The button will have a partially transparent shadow so the usual solution of using a very wide button image won't help because the elements styled with the image overlap and the shadow is visibly stronger in that area. This is solved by making the image twice as wide as we expect our widest button text will occupy, and making half of it completely transparent. We will also see how to export images with sharp edges suppressing the antialiasing with snapping to pixel grid.
How to do it...
The following steps will demonstrate the creation of a button to be used with the CSS Sliding Doors technique:
1. Turn on the Grid (#) and make sure the Snap nodes or handles button on the snapping toolbar is on.
2. Select the Rectangle tool (F4 or R) and create a 600x40 rectangle snapping...
