Simple and practical, pure CSS button effect

In many Web sites need to be practical to the button, a good-looking practical css button can give visitors a sense of beauty, but also convenient for developers. Here is a pure CSS button, you need to refer to.

CSS Code

. Div{Display:Inline-block;padding:. 3em. 5em;Background-image:linear-gradient (#ddd, #bbb);Border:1px solid Rgba (0,0,0,.2);Border-radius:. 3em;Box-shadow:0 1px White inset;text-align:Center;Text-shadow:0 1px 1px black;Color: White;Font-weight:Bold;}. Div:active{Box-shadow:. 05em. 1em. 2em Rgba (0,0,0,.6) Inset;Border-color:Rgba (0,0,0,.3);background:#bbb;}

HTML code

<class= "div">button</div> 

Several other buttons

Background color

Background-image:linear-gradient (#f5c153, #ea920d);

Background color

Background-image:linear-gradient (#8eb349, #5f7c22);

Background color

Background-image:linear-gradient (#fbb2d0, #e779aa);

Simple and practical, pure CSS button effect