[Tutorial] jquery creates a dynamic gradient button

This is a tutorial for web designers and front-end developers. We will demonstrate how to use Photoshop to create a Sprite graph, and then how to use jqurey to create a dynamic gradient effect. This tutorial consists of the following three steps:

Step1-photoshopstep2-html/cssstep3-JavaScript (jquery) step4-CSS Modification

 

The final result is as follows:

You can click to view the demo or download the source code.

 

Step 1-Photoshop

1. Create a file

The size of the button is 100px x 80px, but we need to create a CSS sprite background image in two states, so we create (CTRL + n) in Photoshop) an image file with a length of 200px x 160px, for example:

2. Create reference lines

To make the Drawing button easier, we create a reference line and pull the reference line from the ruler. If you cannot find the ruler, press Ctrl + R to display it, for example:

3. Draw shape

Select the rectangular tool in the tool panel, set the radius of the rounded corner to 10px, and draw the shape on the canvas, such:

4. Set shape styles

Next, double-click the layer, open the layer style window, set the shape style, first select gradient superposition, set the gradient color from # 3d3d3d to # 8b8b8b, such:

Then, select "inner light", set the mixed mode to "normal", the opacity to 100%, the color to # ffffff, And the pixel size to 3 pixels, such:

Then, select "stroke", set the size to 1 pixel, the position to "internal", and the color to black #000000, such:

5. Add a font

Enter the text, set the text to relatively horizontal and vertical center, the font is simplified, the font size is 36, bold and smooth, the color is white (# ffffff), such:

6. Set the Font Style

Double-click the text layer, open the text layer style, set the font style, click "projection", set the mixed mode to "normal", color to # 3e3e3e, and opacity to 100%, the angle is 90 degrees, the distance is 1 pixel, and the size is 2 pixels. Click "Inner Shadow" and set the blending mode to "normal". The color is #454545, And the opacity is 75%, the angle is 90 degrees, the distance is 1 pixel, and the size is 2 pixels, as shown in:

Now, we have completed the button background image in the Link State. The effect is as follows:

7. Hover the background image

Create a button background image in the hover state, place the layers in the group, copy the group, move, and rename the image, for example:

8. Background Image attributes

Modify the style attribute of the hover background image, open the layer style window of the background image, select "stroke", and change the border color to #004d77; select "gradient superposition ", modify the gradient from #1671a3 to #5 baedc, for example:

 

9. Set the Font Style

Open the font layer style, select "projection", and change the Projection Color to # 207aad. Select "Inner Shadow" and change the font color to #0d4f74, for example:

10. translucent layers

Add the translucent effect of the layer. Follow the preceding steps to modify the effect. Hover the cursor over the background image as follows. Add a translucent layer and add a white layer of 200px x 40px, set the top and the transparency of the white layer to 10%, for example:

Finally, we have completed the CSS sprite background image as follows. You can also click to download the PSD file.

 

Step 2-html/CSS

Button htmlCodeSimple:

 
<A class = "button"> front-end file </a>
 

Set the background image through CSS. the CSS code is 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 image we designed above, the length and width of the button are 200px x 80px, and the background image is a black button. This section of CSS can achieve the first effect (pure CSS effect) in our example ).

 

Step 3-JavaScript/jquery

Using JavaScript, we can make the buttons more cool. We need to add a <span> element to the background layer that is displayed when the mouse is hovering, then HTML will be modified:

 
<A class = "button"> <SPAN class = "hover"> front-end file </span> </a>
 

<Span> the elements are completely transparent before hovering over the mouse. When the mouse passes through, the elements are gradually opaque to achieve the gradient effect. The animation process is as follows:

Through the above analysis, we can write the jquery Code as follows. After Dom loading is complete, add the <span> layer for the button link as the background image when the mouse passes, when a mouse hover event is added to the <span> element, the gradient becomes opaque when the mouse passes. When the mouse leaves, the gradient becomes completely transparent.

// Include the text in the <span> element and then append it. $ ('. jsbutton ,. viewbutton ,. downloadbutton '). wrapinner ('<SPAN class = "hover"> </span> 'text.css ('textindent', '0 '). each (function () {// set <span> completely transparent element first, and then click the mouse suspension event ('span.hover'}.css ('opacity ', 0 ). hover (function () {$ (this ). stop (). fadeto (650, 1); // gradient to Opacity}, function () {$ (this ). stop (). fadeto (650, 0); // gradient to full transparency });});
 

So far, we have completed the JS Code, but also pay attention to a step, CSS modification, see step 4.

 

Step 4-CSS Modification

In the example of pure CSS effect, we use the hover pseudo class to implement sprite image switching. When we use jquery, is to introduce a <span> layer as the background image when the mouse passes, so CSS needs to be modified as follows:

 
/* Previous button hover style */. button: hover {Background: url(bg_button.gif) Bottom no-Repeat;} to/* do not need to set the hover style, but set span. hover style */. button span. hover {/* be sure to use absolute positioning */position: absolute; display: block; width: 200px; Height: 80px; Background: url(bg_button.gif) Bottom no-Repeat; text-indent: -9999px ;}
 

 

Summary

In the above four steps, we have implemented a dynamic gradient button. In the demonstration, I also provided an extension example, which can be implemented by yourself or downloaded.Source codeModify customization. Of course, if you have any suggestions or have any questions, please leave a message for me.

View Final Results

Download source code

Address: http://www.cnblogs.com/wiky/articles/gradual-change-button.html

PS: This article was originally prepared by Vic. If you have any reposted information, please indicate the source. Thank you!