本文小编为大家详细介绍“怎么用css实现button按钮的点击效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用css实现button按钮的点击效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
<!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <title>按钮点击效果</title> </head> <body> </body> </html>
3.然后在HTML代码架构中的body标签里面使用button标签设计一个按钮。
<button class="primary-btn">主要按钮</button>
4.在html架构中的html标签里面添加style标签并写入css样式代码来实现按钮点击效果。
<style>
.primary-btn {
font-size: 14px;
color: #fff;
height: 44px;
padding: 0 15px;
background-color: #07c160;
border: 1px solid #07c160;
line-height: 1.2;
text-align: center;
border-radius: 2px;
cursor: pointer;
transition: opacity 0.2s;
outline: none;
position: relative;
}
.primary-btn::before {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background-color: #000;
border: inherit;
border-color: #000;
border-radius: inherit;
transform: translate(-50%, -50%);
opacity: 0;
content: ' ';
}
.primary-btn:active::before {
opacity: 0.1;
}
</style>
完整示例代码如下：
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <title>按钮点击效果</title> <style> .primary-btn { font-size: 14px; color: #fff; height: 44px; padding: 0 15px; background-color: #07c160; border: 1px solid #07c160; line-height: 1.2; text-align: center; border-radius: 2px; cursor: pointer; transition: opacity 0.2s; outline: none; position: relative; } .primary-btn::before { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-color: #000; border: inherit; border-color: #000; border-radius: inherit; transform: translate(-50%, -50%); opacity: 0; content: ' '; } .primary-btn:active::before { opacity: 0.1; } </style> </head> <body> <button class="primary-btn">主要按钮</button> </body> </html>
读到这里，这篇“怎么用css实现button按钮的点击效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程之家行业资讯频道。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
