Making of contact Effect button

Button First please look at the effect of the button, please click the mouse button, go to another page to see the effect

Through the above example effect, we can clearly feel the button is pressed to touch the effect of depression, how to create such a realistic press touch button? Please come with me:

1, open FW, a new file, the size of the file to consider the size of the button to make, background color, you can use a transparent background, in order to facilitate the integration of the background of the Web page, where we in order to describe the convenience, the use of a white background.

2, the Execution menu command "insert--new button", will automatically enter the button symbol edit area, we first want to edit is the button up state.

3, using the last section we describe the third production scheme, draw a rounded rectangle, the rectangle's fill is linear (linear gradient), the fill scheme is "black,white", by selecting the toolbox of the paint bucket tool to adjust the direction of the fill color, as shown in the following figure:

4. Draw a rounded rectangle again, note that when drawing, the width and height are smaller than the rounded rectangle just drawn in the previous step. Fill the way still for the "Linear (linear gradient)" Fill, fill the scheme needs to change, click the Edit button, open the Color edit column, the fill color into the "#0064ff-#00ccff", of course, you can also make the relevant adjustments, the specific settings, please look at the following figure:

5. Select the rounded rectangle that is just drawn at the top, select the Paint Bucket tool to change the fill of the gradient color, as shown in the following illustration:

6, input related text prompts, so that the button up state is complete, as shown in the following figure:

7, Next, we edit the button over state. 8, directly located in the click of the button below the edit area, so that the up state of the button content copied to over state. 9, the next operation is that we make button by touch effect of the key, selected at the top of the rounded rectangle object, open the Effect (effect) panel, the implementation of which "Effect--shadow and glow--drop Shadow" effect command, In the shaded settings box that pops up, you don't need to make the rest, keep the default settings, as shown in the following illustration:

10. At the top of the rounded rectangle object is still selected, continue to Effect effect command processing, the "Effect--shadow and Glow--inner Shadow" effect command, in the subsequent Inner shadow effect setting box, The shadow of the distance to the size of small adjustments, the value of smaller, here set to 6 pixel size, the rest of the set to keep the default value can be set, please refer to the following figure:

11, another step is more critical, in order to make the effect of the touch more realistic, the upper corner of the rounded rectangle to the right downward move a pixel distance, using the keyboard keys to adjust, while the text object also corresponding to the right downward move 3 to 4 pixel distance, The adjusted over state buttons are shown in the following illustration:

12, next edit the button down state. Click on the button directly below the edit area, we can adjust the button of down state again, this is in accordance with your mind to do! hehe ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~:) 13, the other state of the button does not need to be adjusted again, the above operation completed, directly close the button edit area, returned to the main

14, directly click the Preview option to preview, by the touch effect is not already there?

15, next we need to export the production of a good button to the Web page, the specific method does not introduce, if the content of this piece is not too familiar with, you can refer to the relevant basic article here , OK, this section of the study to this end.

button source file download