Pure CSS3 cool colorful 3D button style

Brief Tutorial

This is a cool colorful 3D button style made using CSS3 linear gradient. This set of buttons is divided into different colors, sizes and rounded corners. When using it, you only need to add the corresponding class. It is simple and practical.

How to use

HTML structure

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

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

CSS style

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.2em 0 hsla(0,0%,100%,0.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.25),
                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);
}

CSS styles for various sizes, rounded corners and colors of buttons are as follows.

/* Large */
.large {font-size: 1.25em;}
 
/* Medium */
.medium {font-size: 1em;}
 
/* Small */
.small {font-size: .75em;}
 
/* Regular */
.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 {background-color: #fff6c6;}
 
/* Green */
.green {background-color: #6fcf6f;}
 
/* Blue */
.blue {background-color: #6fc6ff;}
 
/* Purple */
.purple {background-color: #f6c6ff;}
 
/* White */
.white {background-color: #eee;}
 
/* Grey */
.grey {background-color: #999;}
 
/* Black */
.black {background-color: #444;}

The above is the content of pure CSS3 cool color 3D button style. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!