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: Step 1-PhotoshopStep2-HTML/CSSStep3-JavaScript (jQuery) Step4-CSS Modification
The final result is as follows:
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
The HTML code of the button is simple:
Front-end Archives
Set the background image through CSS. the CSS code is as follows:
The 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
Through JavaScript, we can make the buttons more cool. We need to add an element to the background layer that is displayed when the mouse is hovering. Then, HTML will be changed:
View sourceprint? Front-end Archives
The elements are completely transparent before hovering over the mouse. When the mouse passes through, the elements gradually become 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 a layer for the button link as the background image when the mouse passes, and add a mouse hover event for the element, when the mouse passes, the gradient is transparent. When the mouse leaves, the gradient is transparent.
The Code is as follows:
// Include the text in the element and then append it to. button.
Response ('.jsbutton,.viewbutton,.downloadbutton'{.wrapinner(''{.css ('textindent ', '0'). each (function (){
// Set the element to full transparency first, and then add the mouse hover event
Response ('span.hover'0000.css ('opacity ', 0). hover (function (){
$ (This). stop (). fadeTo (650, 1); // gradient to Opacity
}, 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 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, we introduce a layer as the background image when the mouse passes through, therefore, CSS needs to be modified as follows:
The Code is as follows:
/* Previous button hover style */
. Button: hover {
Background: url(bg_button.gif) bottom no-repeat;
}
Change
The Code is as follows:
/* Do not need to set the hover style, but set the span. hover style */
. Button span. hover {
/* 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. You can implement one by yourself or download the source code modification and customization, of course, if you have any suggestions or questions, please leave a message.
Demo address http://demo.jb51.net/js/gcb_download/gradual-change-button.html
Http://demo.jb51.net/js/gcb_download/gcb_download.rar