Use CSS3 Gradients to create a crystal button without images

Before css3 is available, create a crystal button in PS. With css3, we can easily generate crystal buttons. Although CSS3 Gradient has not yet been supported by most browsers, mainstream browsers have supported css3 Gradient (WebKit Nightly (current) and Safari 4 incl in their own kernels. mobile Safari, Chrome 4, Firefox 3.6 ). This article briefly introduces the implementation of CSS3 gradient mentioned in css3 Aqua Button-Revisited for Firefox 3.6.

The html of the button is as follows:

Copy to ClipboardReference: [www.bkjia.com] <div class = "button aqua">
<Div class = "glare"> </div>
Button Label
</Div>

In css, the css attributes of buttton, aqua, and glare are defined respectively. The button defines the button appearance. aqua achieves the crystal effect and. glare achieves the glow effect.

Copy to ClipboardReference: [www.bkjia.com]. button {
Width: 120px;
Height: 24px;
Padding: 5px 16px 3px;
-Webkit-border-radius: 16px;
-Moz-border-radius: 16px;
Border: 2px solid # ccc;
Position: relative;
/* Label */
Font-family: Lucida Sans, Helvetica, sans-serif;
Font-weight: 800;
Color: # fff;
Text-shadow: rgba (10, 10, 10, 0.5) 1px 2px 2px;
Text-align: center;
Vertical-align: middle;
White-space: nowrap;
Text-overflow: ellipsis;
Overflow: hidden;
}

Css code for achieving the crystal effect:

Copy to ClipboardReference: [www.bkjia.com]. aqua {
Background-color: rgba (60,132,198, 0.8 );
Border-top-color: #8ba2c1;
Border-right-color: # 5890bf;
Border-bottom-color: # 4f93ca;
Border-left-color: #768fa5;
-Webkit-box-shadow: rgba (66,140,240, 0.5) 0px 10px 16px;
-Moz-box-shadow: rgba (66,140,240, 0.5) 0px 10px 16px;
Background-image:-webkit-gradient (linear, 0% 0%, 0% 90%, from (rgba (28, 91,155, 0.8), to (rgba (108,191,255 ,. 9 )));
/* For FF 3.6 */
Background-image:-moz-linear-gradient (rgba (28, 91,155, 0.8) 0%, rgba (108,191,255,. 9) 90% );
}

In the above Code,-webkit-box-shadow or-moz-box-shadow generates button projection. Background-image generates a gradient background, similar to "gradient superposition" in PS ".

Css code to achieve the glow effect:

Copy to ClipboardReference: [www.bkjia.com]. button. glare {
Position: absolute;
Top: 0;
Left: 5px;
-Webkit-border-radius: 8px;
-Moz-border-radius: 8px;
Height: 1px;
Width: 142px;
Padding: 8px 0;
Background-color: rgba (255,255,255, 0.25 );
Background-image:-webkit-gradient (linear, 0% 0%, 0% 95%, from (rgba (255,255,255, 0.7), to (rgba (255,255,255, 0 )));
/* For FF 3.6 */
Background-image:-moz-linear-gradient (rgba (255,255,255, 0.7) 0%, rgba (255,255,255, 0) 95% );
}

DEMO: Click the CSS button to view the image creation