html – Onclick CSS按钮效果

概述我正在创建一个CSS按钮,我试图做一个onclick效果：当用户点击按钮时,它会按下按钮文本1px.我的问题在于它是推按钮的整个底部.你会如何进行 <div class="one"> <p><a id="button" href=#>Button</a></p></div> 这是CSS： #button { display: block; width:150px; 我正在创建一个CSS按钮,我试图做一个onclick效果：当用户点击按钮时,它会按下按钮文本1px.我的问题在于它是推按钮的整个底部.你会如何进行

<div >    <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;}

提前致谢,
金

解决方法 您应该应用以下样式：

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

这将给你必要的效果,演示here.

总结

以上是内存溢出为你收集整理的html – Onclick CSS按钮效果全部内容，希望文章能够帮你解决html – Onclick CSS按钮效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。