怎么用css实现button按钮的点击效果
短信预约 -IT技能 免费直播动态提醒
本文小编为大家详细介绍“怎么用css实现button按钮的点击效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用css实现button按钮的点击效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
首先创建一个html文件。
在html文件中添加html代码架构。
<!DOCTYPE html><html> <head><meta charset="UTF-8"> <title>按钮点击效果</title> </head> <body> </body></html>然后在html代码架构中的body标签里面使用button标签设计一个按钮。
<button class="primary-btn">主要按钮</button>在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>最后可通过浏览器方式阅读html文件查看设计效果。
完整示例代码如下：
<!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按钮的点击效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
