在项目开发中，按钮通常需要添加按钮的获得焦点状态，电脑端用 :hover 移动端用 :active 。多个按钮需要添加时，就得添加多个获得焦点样式。

可通过添加背景图片的方式来给所有的按钮添加样式，该样式会给当前按钮添加一个白色的透明层。

background-image: linear-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0.15));

效果图

源码示例  （透明度和颜色值可自行调整）

    <style type="text/css">.btns{overflow: hidden;float: left;padding: 100px;}.btns>div{float: left;margin: 0 5px 5px 0;color: #fff;}.btn{border: none;width: 100px;line-height: 42px;background-color: #f3f3f3;text-align: center;border-radius: 4px;cursor: pointer;}.btn:hover,.btn:active{background-image: linear-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0.15));}</style><div class="btns"><div class="btn" style="background-color: #0BB20C;">按钮-1</div><div class="btn" style="background-color: #f04c37;">按钮-2</div><div class="btn" style="background-color: #0BB20C;">按钮-1</div><div class="btn" style="background-color: #f04c37;">按钮-2</div></div>

 

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号