我正在创建一个CSS按钮,我正在尝试制作一个onclick效果:当用户点击按钮时,它会按下按钮文本1px。我的问题在于它正在推动按钮的整个底部。你会怎么做?
<div class="one">
<p><a id="button" href=#>Button</a></p>
</div>
这是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;
}
答案 0 :(得分:16)
答案 1 :(得分:3)
按下整个按钮。我建议这个按钮看起来不错。
#button:active {
position: relative;
top: 1px;
}
如果你只想推文字增加top-padding并减少底部填充。 您也可以使用line-height。
答案 2 :(得分:3)
这是我做的按下按钮示例:
<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>
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);
}
享受它!
答案 3 :(得分:0)
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>