点击CSS按钮效果

Question

我正在创建一个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;
}

Answer 1

您应该应用下列样式：

#button:active {
    vertical-align: top;
    padding: 8px 13px 6px;
}

这将给你必要的效果，演示这里。

Answer 2

按下整个按钮。我建议这个在按钮上看起来很好看。

#button:active {
    position: relative;
    top: 1px;
}

如果您只想推送文本，增加顶部填充，减少底部填充。你也可以使用线的高度.

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

尽情享受吧！