www.gusucode.com > 多种颜色风格的CSS3按钮代码素材源码程序 > 多种颜色风格的CSS3按钮代码素材/css3button9color/css3-button-9-color/css/style.css

    html {
    text-align: center;
}
body {
    background-color: #fff;
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    background-image:         linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    display: inline-block;
    font-size: 100%;
    margin: 0 auto;
    padding: 3em 6em;
    text-align: left;
}
h1 {
    background-color: #333;
    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-radius: 0 .25em 0 0;
    color: #fff0f5;
    font-family: 'open sans', sans-serif;
    font-size: 3em;
    font-weight: bold;
    line-height: 1;
    margin-left: -999em;
    margin-bottom: -2px;
    padding: 1em 1em 1em 1000em;
    text-align: center;
    text-shadow: 0 .05em .05em hsla(0,0%,0%,.1);
}
p {
    color: #333;
    display: inline-block;
    font-family: 'open sans', sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
    margin: -1em 1em 0 0;
    width: 6em;
    vertical-align: middle;
}
hr {
    border: 1px solid #333;
    margin: 0 0 1em 0;
}
div {
    background-color: #333;
    border-radius: 0 0 .75em 0;
    color: #fff;
    font-family: 'open sans', sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
    margin-left: -999em;
    padding: 2em 1em 2em 1007em;
    text-align: center;
}
label:after {
    color: #fff;
    content: ' #';
}
input {
    background: #fff0f5;
    border: 1px solid #222;
    color: #333;
    margin-right: 5.5em;
    padding: .5em;
}
.attribution {
    color: #888;
    margin-top: 3em;
    text-align: right;
    width: 100%;
}
.attribution a {
    color: #888;
}
.attribution a:hover,
.attribution a:focus {
    color: #333;
}

/* Button - these styles are the good stuff */

.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;
}

/* Light Text */

.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);
}

/* 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;
}

/* Custom */

.custom {
    background-color: #fff0f5; /* Set the button color here */
    color: #444; /* Remove this for a dark background */
}