JQuery Create a dynamic gradient button detailed graphics and text tutorial _jquery

This tutorial is divided into the following three steps:

Step1-photoshop

Step2-html/css

Step3-javascript (JQuery)

STEP4-CSS modification

The final results are as follows:

Step1-photoshop

1. New File

The button size is 100px x 80px, but since we need to create a CSS sprite background with two states, we create (CTRL + N) a picture file with a long width of 200px X 160px in Photoshop, as shown in the following figure:

2. Create a reference line

To make the drawing buttons easier, we create guides, pull the guides out of the ruler, and if you can't find the ruler, you can press Ctrl+r to display the following figure:

3. Draw shape

Select the Rectangle tool in the tool panel, set the fillet radius to 10px, and draw the shape on the canvas, as shown below:

4. Set Shape Style

In the final step of the diagram, double-click the layer, open the Layer style window, set the shape style, first select the gradient overlay, set the gradient color from #3d3d3d to #8b8b8b, as shown in the following figure:

Then, select inner Glow, set blending mode to "normal", opacity to 100%, color set to #ffffff, and pixel size set to 3 pixels, as shown below:

Then select stroke to set the size to 1 pixels, the position is "internal" and the color is black #000000, as shown below:

5. Add fonts

Input text, set text relative horizontal and vertical center, font for Fangzheng quasi-round, font size 36 points, bold smooth, color white (#FFFFFF), the following figure:

6. Set Font style

Double-click the type layer to open the type layer style, set font style, click "Projection", set the blending mode to "normal", the color is #3e3e3e, opacity is 100%, the angle is 90 degrees, the distance is 1 pixels, the size is 2 pixels; click on "Inner Shadow", set blending mode to "normal", color #454545, the opacity is 75%, the angle is 90 degrees, the distance is 1 pixels, the size is 2 pixels, as shown in the following figure:

At this point, we complete the link state of the button background image, the effect is as follows:

7. Hover background image

Make the mouse hover button background image, put the layer into the group, copy the group, move, and rename, the following figure:

8. Background Image Properties

Modify the style properties of the hover background chart, open the Layer style window for the background map, select stroke, modify the border color to #004d77, select gradient overlay, and modify the gradient from #1671a3 to #5baedc, as shown in the following figure:

9. Set Font style

Open the font layer style, select Drop Shadow, change the projection color to #207aad, select inner Shadow, and modify the font color to #0d4f74, as shown below:

10. Layer Translucent

Add layer semitransparent effect, according to the above steps to modify, the mouse hover background image as follows, and finally a layer of translucent layer, first add a 200px X 40px white layer, the top and set the white layer of transparency of 10%, the following figure:

Finally, we complete the CSS sprite background image below, you can also click to download the PSD file.

Step2-html/css
The HTML code for the button is simple:
<a class= "button" > Front end file </a>
And then through the CSS to set the background picture on it, CSS code is as follows:

Copy Code code as follows:

/* Link button style * *
. button {
width:200px;
height:80px;
Display:block;
Background:url (bg_button.gif) top no-repeat;
text-indent:-9999px;
}
/* Button Hover style * *
. button:hover{
Background:url (bg_button.gif) bottom no-repeat;
}

According to the picture we designed earlier, the length of the button is 200px X 80px, and the background image is a black button. This CSS will be able to implement the first effect in our example (pure CSS effect).

Step3-javascript/jquery

Through JavaScript, we can make the button more cool, we need to add a <span> element, as the mouse hover time to display the background layer, then the HTML will be after the completion of the DOM loading:

View sourceprint?<a class= "button" ><span class= "hover" > Front-End Files </span></a>

<span> elements in front of the mouse hover is fully transparent, when the mouse passes, gradually opaque to achieve the effect of the gradient, animation process as shown below:

Through the above analysis, we can write the jquery code as follows, after the completion of the DOM loading, add <span> layer for the button link as the background image of the mouse, in the <span> element to add a mouse hover event, the mouse over, gradient to opaque, when the mouse left, Gradient to fully transparent.

Copy Code code as follows:

Include the text in the <span> element and append it to the. button
$ ('. Jsbutton,.viewbutton,.downloadbutton '). Wrapinner (' <span class= "hover" ></span> "). CSS (' Textindent ', ' 0 '). each (function () {
Set the <span> element fully transparent before adding the mouse hover event
$ (' Span.hover '). CSS (' opacity ', 0). Hover (function () {
$ (this). Stop (). Fadeto (650, 1); Gradient to Opaque
}, function () {
$ (this). Stop (). Fadeto (650, 0); Gradient to fully transparent
});
});

So far, we have completed the JS code, but also pay attention to a step, CSS changes, see STEP4.
STEP4-CSS modification
In the pure CSS effect example, we are using: hover pseudo class to achieve sprite picture of the switch, when we use jquery, is to introduce a <span> layer as a mouse after the background image, so the CSS needs to do the following modifications:

Copy Code code as follows:

/* Previous button hover style * *
. button:hover{
Background:url (bg_button.gif) bottom no-repeat;
}

Amended to

Copy Code code as follows:

/* Do not need to set: hover style, but set span.hover style * *
. button Span.hover {
/* Note to use absolute positioning */
Position:absolute;
Display:block;
width:200px;
height:80px;
Background:url (bg_button.gif) bottom no-repeat;
text-indent:-9999px;
}

Summarize
We have 4 steps to implement a dynamic gradient button, in the demo, I also provided a sample expansion, you can follow your own implementation, you can download the source code to modify the customization, of course, you have any good suggestions or have any questions, please leave me a message.
Demo Address http://demo.jb51.net/js/gcb_download/gradual-change-button.html
Download Address Http://demo.jb51.net/js/gcb_download/gcb_download.rar