Html Onclick CSS 按钮效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21312127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Onclick CSS button effect
提问by Kimberley Furson
I'm creating a CSS button and I'm trying to make an onclick effect: when the user clicks on the button it would push down the button text by 1px. My problem here is that it's pushing the whole bottom of the button. How would you proceed?
我正在创建一个 CSS 按钮，我正在尝试制作一个 onclick 效果：当用户点击按钮时，它会将按钮文本向下推 1px。我的问题是它正在推动按钮的整个底部。你将如何进行？
<div class="one">
<p><a id="button" href=#>Button</a></p>
</div>
Here's the CSS:
这是CSS：
#button {
display: block;
width:150px;
margin:10px auto;
padding:7px 13px;
text-align:center;
background:#a2bb33;
font-size:20px;
font-family: 'Arial', sans-serif;
color:#ffffff;
white-space: nowrap;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#button:active {
vertical-align: top;
padding-top: 8px;
}
.one a {
text-decoration: none;
}
回答by Vangel Tzo
回答by Zuhair
Push down the whole button. I suggest this it is looking nice in button.
按下整个按钮。我建议这个按钮看起来不错。
#button:active {
position: relative;
top: 1px;
}
if you only want to push text increase top-padding and decrease bottom padding. You can also use line-height.
如果您只想推送文本，请增加顶部填充并减少底部填充。您也可以使用行高。
回答by Davi Trenou
This is a press down button example I've made:
这是我制作的按下按钮示例：
<div>
<form id="forminput" action="action" method="POST">
...
</form>
<div style="right: 0px;bottom: 0px;position: fixed;" class="thumbnail">
<div class="image">
<a onclick="document.getElementById('forminput').submit();">
<img src="images/button.png" alt="Some awesome text">
</a>
</div>
</div>
</div>
the CSS file:
CSS文件：
.thumbnail {
width: 128px;
height: 128px;
}
.image {
width: 100%;
height: 100%;
}
.image img {
-webkit-transition: all .25s ease; /* Safari and Chrome */
-moz-transition: all .25s ease; /* Firefox */
-ms-transition: all .25s ease; /* IE 9 */
-o-transition: all .25s ease; /* Opera */
transition: all .25s ease;
max-width: 100%;
max-height: 100%;
}
.image:hover img {
-webkit-transform:scale(1.05); /* Safari and Chrome */
-moz-transform:scale(1.05); /* Firefox */
-ms-transform:scale(1.05); /* IE 9 */
-o-transform:scale(1.05); /* Opera */
transform:scale(1.05);
}
.image:active img {
-webkit-transform:scale(.95); /* Safari and Chrome */
-moz-transform:scale(.95); /* Firefox */
-ms-transform:scale(.95); /* IE 9 */
-o-transform:scale(.95); /* Opera */
transform:scale(.95);
}
Enjoy it!
好好享受！
回答by Ronnie Royston
JS provides the tools to do this the right way. Try the demo snippet.
JS 提供了以正确方式执行此操作的工具。尝试演示代码段。
var doc = document;
var buttons = doc.getElementsByTagName('button');
var button = buttons[0];
button.addEventListener("mouseover", function(){
this.classList.add('mouse-over');
});
button.addEventListener("mouseout", function(){
this.classList.remove('mouse-over');
});
button.addEventListener("mousedown", function(){
this.classList.add('mouse-down');
});
button.addEventListener("mouseup", function(){
this.classList.remove('mouse-down');
alert('Button Clicked!');
});
//this is unrelated to button styling. It centers the button.
var box = doc.getElementById('box');
var boxHeight = window.innerHeight;
box.style.height = boxHeight + 'px'; button{
text-transform: uppercase;
background-color:rgba(66, 66, 66,0.3);
border:none;
font-size:4em;
color:white;
-webkit-box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.33);
-moz-box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.33);
box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.33);
}
button:focus {
outline:0;
}
.mouse-over{
background-color:rgba(66, 66, 66,0.34);
}
.mouse-down{
-webkit-box-shadow: 0px 6px 5px -4px rgba(0,0,0,0.52);
-moz-box-shadow: 0px 6px 5px -4px rgba(0,0,0,0.52);
box-shadow: 0px 6px 5px -4px rgba(0,0,0,0.52);
}
/* unrelated to button styling */
#box {
display: flex;
flex-flow: row nowrap ;
justify-content: center;
align-content: center;
align-items: center;
width:100%;
}
button {
order:1;
flex: 0 1 auto;
align-self: auto;
min-width: 0;
min-height: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="description" content="3d Button Configuration" />
</head>
<body>
<section id="box">
<button>
Submit
</button>
</section>
</body>
</html>