html自定义单选框按钮,CSS3 自定义样式的单选框按钮

CSS

语言：

CSSSCSS

确定

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

html,

body {

height: 100%;

}

html {

background: #444;

background: -webkit-radial-gradient(center, circle, #666, #222);

background: radial-gradient(circle at center, #666, #222);

}

body {

min-height: 100%;

overflow: hidden;

}

.wrap {

height: 100%;

min-height: 100%;

margin: 0 auto;

}

.buttons-wrap {

position: relative;

text-align: center;

top: 50%;

margin-top: -35px;

}

.button-label {

display: inline-block;

padding: 14px 30px;

margin: 10px 5px;

cursor: pointer;

color: #737373;

text-shadow: 0 -1px 0 white;

border: 1px solid #737373;

font-size: 20px;

font-family: "Lato", sans-serif;

font-weight: 900;

border-radius: 4px;

background: #eee;

background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#ccc));

background: -webkit-linear-gradient(#fefefe, #ccc);

background: linear-gradient(#fefefe, #ccc);

-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);

box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);

-webkit-transition: 0.1s;

transition: 0.1s;

-webkit-touch-callout: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.button-label:hover {

background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e5e5e5));

background: -webkit-linear-gradient(#fefefe, #e5e5e5);

background: linear-gradient(#fefefe, #e5e5e5);

}

.button-label:active {

-webkit-transform: translateY(2px);

-ms-transform: translateY(2px);

transform: translateY(2px);

-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);

box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);

}

#yes-button:checked + .button-label {

background: #a1d122;

background: -webkit-radial-gradient(center, circle, #9bd500, #a1d122);

background: radial-gradient(circle at center, #9bd500, #a1d122);

color: white;

text-shadow: 0 1px 0 #737373;

border-color: #7fa51b;

}

#no-button:checked + .button-label {

background: -webkit-radial-gradient(center, circle, #e60000, #c00);

background: radial-gradient(circle at center, #e60000, #c00);

color: white;

text-shadow: 0 1px 0 #737373;

border-color: #900;

}

.hidden {

display: none;

}