如何让按钮被点击后凹陷？
How to make buttons sunken after being clicked?
我有多个按钮，点击后显示它们是 selected.I 已经成功实现 that.But 问题是鼠标松开后按钮再次升起。
我需要按钮在鼠标离开后保持按下状态。
截图：
代码：
.button {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
/* gradient effects */
0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
/* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
/* dark outside gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
/* light inner gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
/* diagonal line pattern */
-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
-webkit-box-shadow: 0px -1px #fff,
/* top highlight */
0px 1px 1px #FFFFFF;
/* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button:active {
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
/* shadow */
}
.button:active span {
-webkit-transform: translate(0, 5px);
/* depth of button press */
}
.button span:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">
<a class="button">
<span>select me </span>
</a>
首先，使用别名 class 修饰使用 :active 属性的 css 样式，例如
.button:active, .button-active{
...
}
.button:active span, .button-active span{
...
}
然后制作一个 onclick 事件处理程序，手动切换 class
function toggleActive(element){
element.classList.toggle('button-active');
}
function toggleActive(element){
element.classList.toggle('button-active');
}
body {
background: #A7A9AC;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(.34, rgba(230,237,241,.05)),
color-stop(.67, rgba(230,237,241,0)));
-webkit-background-size: 5px 5px;
}
#pagegradient {
background-image:
-webkit-gradient(
radial,
50% -50,
300,
50% 0,
0,
from(rgba(230, 237, 241, 0)),
to(rgba(230, 237, 241, 0.8)));
height:100%;
left:0px;
position:absolute;
top:0;
width: 600px;
}
.button {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow:
0px 3px rgba(128,128,128,1), /* gradient effects */
0px 4px rgba(118,118,118,1),
0px 5px rgba(108,108,108,1),
0px 6px rgba(98,98,98,1),
0px 7px rgba(88,88,88,1),
0px 8px rgba(78,78,78,1),
0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.3)),
color-stop(100%,rgba(255,255,255,0.2))),
/* dark outside gradient */
-webkit-gradient(
linear,
left top,
right top,
color-stop(0%,rgba(210,210,210,0.3)),
color-stop(20%,rgba(210,210,210,0)),
color-stop(80%,rgba(210,210,210,0)),
color-stop(100%,rgba(210,210,210,0.3))),
/* light inner gradient */
-webkit-gradient(
linear,
left top,
right top,
color-stop(0%,rgba(255,255,255,0)),
color-stop(20%,rgba(255,255,255,0.5)),
color-stop(80%,rgba(255,255,255,0.5)),
color-stop(100%,rgba(255,255,255,0))),
/* diagonal line pattern */
-webkit-gradient(
linear,
0% 100%,
100% 0%,
color-stop(0%,rgba(255,255,255,0)),
color-stop(40%,rgba(255,255,255,0)),
color-stop(40%,#D2D2D1),
color-stop(60%,#D2D2D1),
color-stop(60%,rgba(255,255,255,0)),
color-stop(100%,rgba(255,255,255,0)));
-webkit-box-shadow:
0px -1px #fff, /* top highlight */
0px 1px 1px #FFFFFF; /* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20','PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button:active, .button-active{
-webkit-box-shadow:
0px 3px rgba(128,128,128,1),
0px 4px rgba(118,118,118,1),
0px 5px rgba(108,108,108,1),
0px 6px rgba(98,98,98,1),
0px 7px rgba(88,88,88,1),
0px 8px rgba(78,78,78,1),
0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
}
.button:active span, .button-active span{
-webkit-transform: translate(0, 5px); /* depth of button press */
}
.button span:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css" >
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" >
<div id="pagegradient"></div>
<a class="button" onclick="toggleActive(this)">
<span>select me </span>
</a>
不用JavaScript也能实现。尝试 :checked 伪 class 和相邻兄弟选择器 (+):
label {
width: 120px;
height: 40px;
background: #d00;
display: inline-block;
text-align: center;
line-height: 40px;
cursor: pointer;
color: white;
}
#checkbox {
display: none;
}
#checkbox:checked + label {
background: #600;
}
<input type="checkbox" id="checkbox">
<label for="checkbox">select me </label>
我也对你的fiddle
做了一点改动
你也可以做好看的单选：
label {
width: 120px;
height: 40px;
background: #d00;
display: inline-block;
text-align: center;
line-height: 40px;
cursor: pointer;
color: white;
}
input {
display: none;
}
input:checked + label {
background: #600;
}
<input type="radio" name="group" id="option1">
<label for="option1">select 1</label>
<input type="radio" name="group" id="option2">
<label for="option2">select 2</label>
<input type="radio" name="group" id="option3">
<label for="option3">select 3</label>
<input type="radio" name="group" id="option4">
<label for="option4">select 4</label>
您可以在下面找到基于 jQuery 的版本的完整代码，一个基于 vanilla JS 和一个仅使用 HTML 和 CSS 来达到预期效果的版本。
您还可以尝试使用以下 Fiddles 中的代码：
jQuery版本：
HTML :
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">
<a class="button">
<span>select me </span>
</a>
CSS :
.button {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
/* gradient effects */
0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
/* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
/* dark outside gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
/* light inner gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
/* diagonal line pattern */
-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
-webkit-box-shadow: 0px -1px #fff,
/* top highlight */
0px 1px 1px #FFFFFF;
/* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button.pressed {
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
/* shadow */
}
.button.pressed span {
-webkit-transform: translate(0, 5px);
/* depth of button press */
}
.button span:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
JS :
$('.button').click(function(){
$(this).toggleClass('pressed');
});
没有jQuery的JS版本：
HTML :
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">
<a class="button">
<span>select me </span>
</a>
CSS :
.button {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
/* gradient effects */
0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
/* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
/* dark outside gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
/* light inner gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
/* diagonal line pattern */
-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
-webkit-box-shadow: 0px -1px #fff,
/* top highlight */
0px 1px 1px #FFFFFF;
/* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button.pressed {
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
/* shadow */
}
.button.pressed span {
-webkit-transform: translate(0, 5px);
/* depth of button press */
}
.button span:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
JS :
var buttons = document.getElementsByClassName("button");
[].forEach.call(buttons, function(button) {
button.addEventListener("click", function(e) {
this.classList.toggle('pressed');
});
});
HTML/CSS 唯一版本：
HTML :
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">
<button class="button">
<input type="checkbox" id="selectme" />
<span>
<label for="selectme">select me </label>
</span>
</button>
CSS :
.button {
margin-left: -5000px;
}
.button span {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
/* gradient effects */
0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
/* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button label {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
/* dark outside gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
/* light inner gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
/* diagonal line pattern */
-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
-webkit-box-shadow: 0px -1px #fff,
/* top highlight */
0px 1px 1px #FFFFFF;
/* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button label:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button input:checked + span {
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
/* shadow */
}
.button input:checked + span label {
-webkit-transform: translate(0, 5px);
/* depth of button press */
}
.button label:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
JS :
/* CSS only means that no JS code is required at all! */
我有多个按钮，点击后显示它们是 selected.I 已经成功实现 that.But 问题是鼠标松开后按钮再次升起。
我需要按钮在鼠标离开后保持按下状态。
截图：
代码：
.button {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
/* gradient effects */
0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
/* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
/* dark outside gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
/* light inner gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
/* diagonal line pattern */
-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
-webkit-box-shadow: 0px -1px #fff,
/* top highlight */
0px 1px 1px #FFFFFF;
/* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button:active {
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
/* shadow */
}
.button:active span {
-webkit-transform: translate(0, 5px);
/* depth of button press */
}
.button span:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">
<a class="button">
<span>select me </span>
</a>
首先，使用别名 class 修饰使用 :active 属性的 css 样式，例如
.button:active, .button-active{
...
}
.button:active span, .button-active span{
...
}
然后制作一个 onclick 事件处理程序，手动切换 class
function toggleActive(element){
element.classList.toggle('button-active');
}
function toggleActive(element){
element.classList.toggle('button-active');
}
body {
background: #A7A9AC;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(.34, rgba(230,237,241,.05)),
color-stop(.67, rgba(230,237,241,0)));
-webkit-background-size: 5px 5px;
}
#pagegradient {
background-image:
-webkit-gradient(
radial,
50% -50,
300,
50% 0,
0,
from(rgba(230, 237, 241, 0)),
to(rgba(230, 237, 241, 0.8)));
height:100%;
left:0px;
position:absolute;
top:0;
width: 600px;
}
.button {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow:
0px 3px rgba(128,128,128,1), /* gradient effects */
0px 4px rgba(118,118,118,1),
0px 5px rgba(108,108,108,1),
0px 6px rgba(98,98,98,1),
0px 7px rgba(88,88,88,1),
0px 8px rgba(78,78,78,1),
0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.3)),
color-stop(100%,rgba(255,255,255,0.2))),
/* dark outside gradient */
-webkit-gradient(
linear,
left top,
right top,
color-stop(0%,rgba(210,210,210,0.3)),
color-stop(20%,rgba(210,210,210,0)),
color-stop(80%,rgba(210,210,210,0)),
color-stop(100%,rgba(210,210,210,0.3))),
/* light inner gradient */
-webkit-gradient(
linear,
left top,
right top,
color-stop(0%,rgba(255,255,255,0)),
color-stop(20%,rgba(255,255,255,0.5)),
color-stop(80%,rgba(255,255,255,0.5)),
color-stop(100%,rgba(255,255,255,0))),
/* diagonal line pattern */
-webkit-gradient(
linear,
0% 100%,
100% 0%,
color-stop(0%,rgba(255,255,255,0)),
color-stop(40%,rgba(255,255,255,0)),
color-stop(40%,#D2D2D1),
color-stop(60%,#D2D2D1),
color-stop(60%,rgba(255,255,255,0)),
color-stop(100%,rgba(255,255,255,0)));
-webkit-box-shadow:
0px -1px #fff, /* top highlight */
0px 1px 1px #FFFFFF; /* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20','PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button:active, .button-active{
-webkit-box-shadow:
0px 3px rgba(128,128,128,1),
0px 4px rgba(118,118,118,1),
0px 5px rgba(108,108,108,1),
0px 6px rgba(98,98,98,1),
0px 7px rgba(88,88,88,1),
0px 8px rgba(78,78,78,1),
0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
}
.button:active span, .button-active span{
-webkit-transform: translate(0, 5px); /* depth of button press */
}
.button span:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css" >
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" >
<div id="pagegradient"></div>
<a class="button" onclick="toggleActive(this)">
<span>select me </span>
</a>
不用JavaScript也能实现。尝试 :checked 伪 class 和相邻兄弟选择器 (+):
label {
width: 120px;
height: 40px;
background: #d00;
display: inline-block;
text-align: center;
line-height: 40px;
cursor: pointer;
color: white;
}
#checkbox {
display: none;
}
#checkbox:checked + label {
background: #600;
}
<input type="checkbox" id="checkbox">
<label for="checkbox">select me </label>
我也对你的fiddle
做了一点改动你也可以做好看的单选：
label {
width: 120px;
height: 40px;
background: #d00;
display: inline-block;
text-align: center;
line-height: 40px;
cursor: pointer;
color: white;
}
input {
display: none;
}
input:checked + label {
background: #600;
}
<input type="radio" name="group" id="option1">
<label for="option1">select 1</label>
<input type="radio" name="group" id="option2">
<label for="option2">select 2</label>
<input type="radio" name="group" id="option3">
<label for="option3">select 3</label>
<input type="radio" name="group" id="option4">
<label for="option4">select 4</label>
您可以在下面找到基于 jQuery 的版本的完整代码，一个基于 vanilla JS 和一个仅使用 HTML 和 CSS 来达到预期效果的版本。
您还可以尝试使用以下 Fiddles 中的代码：
jQuery版本：
HTML :
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">
<a class="button">
<span>select me </span>
</a>
CSS :
.button {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
/* gradient effects */
0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
/* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
/* dark outside gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
/* light inner gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
/* diagonal line pattern */
-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
-webkit-box-shadow: 0px -1px #fff,
/* top highlight */
0px 1px 1px #FFFFFF;
/* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button.pressed {
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
/* shadow */
}
.button.pressed span {
-webkit-transform: translate(0, 5px);
/* depth of button press */
}
.button span:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
JS :
$('.button').click(function(){
$(this).toggleClass('pressed');
});
没有jQuery的JS版本：
HTML :
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">
<a class="button">
<span>select me </span>
</a>
CSS :
.button {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
/* gradient effects */
0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
/* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
/* dark outside gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
/* light inner gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
/* diagonal line pattern */
-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
-webkit-box-shadow: 0px -1px #fff,
/* top highlight */
0px 1px 1px #FFFFFF;
/* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button.pressed {
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
/* shadow */
}
.button.pressed span {
-webkit-transform: translate(0, 5px);
/* depth of button press */
}
.button span:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
JS :
var buttons = document.getElementsByClassName("button");
[].forEach.call(buttons, function(button) {
button.addEventListener("click", function(e) {
this.classList.toggle('pressed');
});
});
HTML/CSS 唯一版本：
HTML :
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">
<button class="button">
<input type="checkbox" id="selectme" />
<span>
<label for="selectme">select me </label>
</span>
</button>
CSS :
.button {
margin-left: -5000px;
}
.button span {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
/* gradient effects */
0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
/* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button label {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
/* dark outside gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
/* light inner gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
/* diagonal line pattern */
-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
-webkit-box-shadow: 0px -1px #fff,
/* top highlight */
0px 1px 1px #FFFFFF;
/* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button label:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button input:checked + span {
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
/* shadow */
}
.button input:checked + span label {
-webkit-transform: translate(0, 5px);
/* depth of button press */
}
.button label:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
JS :
/* CSS only means that no JS code is required at all! */