Pure CSS3 Super Cool color 3D button style

Brief tutorials

This is a cool color 3D button style made using the CSS3 linear gradient. This group of buttons can be divided into different colors, sizes and fillets, and it is simple and practical to add the corresponding class class.

How to use

HTML structure

The basic HTML structure of the button is very simple, using a hyperlink <a> element to make.

<a class= "button large regular red" href= "javascript:void (0);" >Button</a>

CSS Styles

The general CSS style of the button is as follows.

. button {background-color: #999;    Background-image:-webkit-linear-gradient (Hsla (0,0%,100%,.05), Hsla (0,0%,0%,.1));    Background-image:-moz-linear-gradient (Hsla (0,0%,100%,.05), Hsla (0,0%,0%,.1));    Background-image:-ms-linear-gradient (Hsla (0,0%,100%,.05), Hsla (0,0%,0%,.1));    Background-image:-o-linear-gradient (Hsla (0,0%,100%,.05), Hsla (0,0%,0%,.1));    Background-image:linear-gradient (Hsla (0,0%,100%,.05), Hsla (0,0%,0%,.1));    Border:none;    Border-radius:. 5em; Box-shadow:inset 0 0 0 1px hsla (0,0%,0%,.2), inset 0 2px 0 hsla (0,0%,100%,.1), inset 0 1.2e M 0 Hsla (0,0%,100%,0.1), inset 0-.2em 0 hsla (0,0%,100%,.1), inset 0-.25em 0 hsla (0,0%,0%,.    ), 0.25em. 25em Hsla (0,0%,0%,.05);    Color: #444;    Cursor:pointer;    Display:inline-block;    Font-family:sans-serif;    Font-size:1em;    Font-weight:bold;    line-height:1.5;    margin:0.5em 1em; padding:. 5em 1.5em .75em;    position:relative;    Text-decoration:none;    text-shadow:0 1px 1px hsla (0,0%,100%,.25); Vertical-align:middle;}. button:hover {outline:none;}. Button:hover,.button:focus {box-shadow:inset 0 0 0 1px hsla (0,0%,0%,.2), inset 0 2px 0 hsla (0,0%,100%,                .1), inset 0 1.2em 0 hsla (0,0%,100%,.1), inset 0-.2em 0 hsla (0,0%,100%,.1), Inset 0-.25em 0 hsla (0,0%,0%,.25), inset 0 0 0 3em hsla (0,0%,100%,.2), 0.25em. 25em Hsla (0 , 0%,0%,.05);}.                button:active {box-shadow:inset 0 0 0 1px hsla (0,0%,0%,.2), inset 0 2px 0 hsla (0,0%,100%,.1),  Inset 0 1.2em 0 hsla (0,0%,100%,.1), inset 0 0 0 3em hsla (0,0%,100%,.2), inset 0.25em    .5em Hsla (0,0%,0%,.05), 0-1px 1px hsla (0,0%,0%,.1), 0 1px 1px hsla (0,0%,100%,.25);    Margin-top:. 25em;    Outline:none; Padding-bottom:. 5em;}

The text style on the

button is as follows.

. lighttext {box-shadow:inset 0 0 0 1px hsla (0,0%,0%,.25), inset 0 2px 0 hsla (0,0%,100%,.1),  Inset 0 1.2em 0 hsla (0,0%,100%,.05), inset 0-.2em 0 hsla (0,0%,100%,.1), inset 0-.25em    0 Hsla (0,0%,0%,.5), 0.25em. 25em Hsla (0,0%,0%,.1);    Color: #fff; text-shadow:0 -1px 1px hsla (0,0%,0%,.25);}. Lighttext:hover,.lighttext:focus {box-shadow:inset 0 0 0 1px hsla (0,0%,0%,.25), inset 0 2px 0 Hsla (0,0                %,100%,.1), inset 0 1.2em 0 hsla (0,0%,100%,.05), inset 0-.2em 0 hsla (0,0%,100%,.1),  Inset 0-.25em 0 hsla (0,0%,0%,.5), inset 0 0 0 3em hsla (0,0%,100%,.2), 0.25em. 25em Hsla (0,0%,0%,.1);}.                lighttext:active {box-shadow:inset 0 0 0 1px hsla (0,0%,0%,.25), inset 0 2px 0 hsla (0,0%,100%,.1), Inset 0 1.2em 0 hsla (0,0%,100%,.05), inset 0 0 0 3em hsla (0,0%,100%,.2), INSET 0.25em. 5em Hsla (0,0%,0%,.05), 0-1px 1px hsla (0,0%,0%,.1), 0 1px 1px hsla (0,0%,100%,.25 );}

Buttons are available in various sizes, rounded corners and color CSS styles as follows.

/* Large */.large {font-size:1.25em;}/* Medium */.medium {font-size:1em;}/* Small */.small {font-size:. 75em;}/* Regu Lar */.regular {border-radius:. 5em;}/* Square */.square {border-radius:. 25em;}/* Round */.round {border-radius:1.25em ;} /* Red */.red {background-color: #ff6c6f;}/* Orange */.orange {background-color: #f6cf6f;}/* Yellow */.yellow {Backgroun D-color: #fff6c6;} /* Green */.green {background-color: #6fcf6f;}/* Blue */.blue {background-color: #6fc6ff;}/* Purple */.purple {Backgroun D-color: #f6c6ff;}  /* White */.white {background-color: #eee;}/* Grey */.grey {background-color: #999;}/* Black */.black {background-color: #444;}

The above is pure CSS3 super cool color 3D button style content, more related content please pay attention to topic.alibabacloud.com (www.php.cn)!

