A variety of commonly used button CSS source code

Today I would like to introduce you how to use CSS3 to make a rounded shadow, gradient color of the beautiful button, it does not need any graphics and JavaScript script, only need to CSS3 can easily implement the button effect, and can be applied to any HTML elements, want to Div,span,p,a, Button,input and so on.

View Demo Download source code

Today I would like to introduce you how to use CSS3 to make a rounded shadow, gradient color of the beautiful button, it does not need any graphics and JavaScript script, only need to CSS3 can easily implement the button effect, and can be applied to any HTML elements, want to Div,span,p,a, Button,input and so on.

These pure CSS code to make the size of the button can be automatically adjusted according to font size, gradient background can be compatible with each browser, and have normal, mouse-slide, click Three state style, of course, if your browser does not support CSS3, then the button will not have rounded corners and shadow effect.

CSS3 characteristics

First, we are familiar with how the CSS3 is achieved with rounded corners and shadow effects.

CSS3 provides new properties such as: Shadow Text-shadow,box-shadow, and fillet Border-radius, let's take a look at the CSS3 code first:

text-Shadow01px1pxRgba0,0,0,.3);
box-Shadow01px2pxRgba0,0,0,.2);   
-webkit-box-shadow: 0 1px 2px rgba ( 0,0,0, .2)   
-moz-box-shadow: 0 1px 2px rgba (0, 0,0,.2);   
   

The first line of the above code sets the shadow effect of the text, its usage structure: X-axis offset, y-axis offset, blur amount, color, for color can use RGBA mode.

The second line of code sets the border box shadow effect, using the same as the text shadow effect.

The third and fourth lines represent the CSS3 usage under different browser cores,-webkit-xxx represents the WebKit kernel, and-moz-xxx represents the Firefox kernel.

Border-radius is used to set the fillet style, as well as the WebKit and Firefox points.

border-radius: .5em; 
-webkit-border-radius: .5em; /* for Webkit */ 
-moz-border-radius: .5em;  /* for Firefox */ 

So how do you use CSS3 to deal with the cross-browser compatibility problem of gradients? In the CSS2 era, we usually prepare a well-made gradient background image and then load the background image through Background-color to achieve a background color gradient effect. Instead of CSS3, you only need to distinguish between different browser cores using colors to complete the gradient effect.

Background#0095cd;
/* for Webkit */
Background:-webkit-GradientLinearLeftTopLeftBottomFrom#00adee),to ( #0078a5));   
 /* for  firefox */  
 background: -moz-< Span class= "css__element" >linear-gradient (top,    #00adee,    #0078a5);   
 /*&NBSP;FOR&NBSP;IE&NBSP;*/&NBSP; 
 filter:   progid:D ximagetransform.gradient (startcolorstr= ' # 00adee ',    
 endcolorstr= '  #0078a5 ');   
  

For the WebKit kernel browser,-webkit-gradient (), linear indicates that the gradient type is a linear gradient, the left top represents the x-axis and y-axis of the start of the gradient, and the left bottom represents the end of the gradient x-and Y-axes, from (#00adee), to (#0078a5) indicates that the gradient color is from #00adee to #0078a5.

For the Firefox kernel browser, linear in-moz-linear-gradient (top, #00adee, #0078a5) indicates that the gradient type is a linear gradient, and top represents the beginning of the gradient, followed by a change of two color values.

For the IE kernel, use the filter (filter), where StartColorStr and endcolorstr represent the change values of the starting and ending colors, respectively.

After introducing the CSS3 feature above, we now use CSS3 to make beautiful button effects.

How to use

A variety of commonly used button CSS source code