赞
踩
如下图所示,如果我们要实现这样的按钮点击效果,用CSS
怎样去实现呢?
个人方法是通过伪元素before
结合button
的伪类active
来实现,上代码:
HTML:
<button class="primary-btn">主要按钮</button>
CSS:
.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; }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。