css 按钮按下样式

布满荆棘的人生 2022-02-20 05:17 518阅读 0赞

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

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

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

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70][]

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

<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>

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: /images/20220220/4b919359509043b38cea0be178050efb.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220220/9f291d2bae29425eabea41e1497594fe.png

发表评论取消回复

表情：

评论列表（有 0 条评论，518人围观）

还没有评论，来说两句吧...

相关阅读

相关【QT】QT 按钮保持按下时的样式

按钮设计样式 MainWidget::MainWidget(QWidget parent) : QWidget(parent),

悠悠/ 2024年04月07日 14:50/ 0 赞/ 96 阅读

相关 css制作按钮按下去效果

HTML <img src="./button.png" alt="" class="login" /> 图片： !

系统管理员/ 2023年02月15日 12:42/ 0 赞/ 270 阅读

相关 Appium-Button Down(按下按钮)

这里指鼠标的下按动作 Button Down Example Usage Support

淡淡的烟草味﹌/ 2022年11月19日 04:27/ 0 赞/ 197 阅读

相关纯css3打造能够弹起和按下的按钮,css3按钮代码

<title>纯css3打造能够弹起和按下的按钮,css3按钮代码</title> <style> a.button {

╰半夏微凉°/ 2022年11月10日 05:36/ 0 赞/ 143 阅读

相关 android判断按钮是否按下,android – 如何检测是否按下了向上按钮

见 http://developer.android.com/guide/topics/ui/actionbar.html\Handling 处理对操作项的点击当用户按

青旅半醒/ 2022年10月14日 00:46/ 0 赞/ 175 阅读

相关 html简约按钮样式,简约CSS按钮样式设计+文字特效

标签：按钮： .blog-but\{ /\ 按钮美化 \/ width: 270px; /\ 宽度 \/ height: 40px; /\ 高度 \/ border

￡神魔★判官ぃ/ 2022年10月10日 09:47/ 0 赞/ 241 阅读

相关 CSS样式实现选择按钮

CSS样式实现选择按钮表单元素中的选择按钮的原生样式并不好看，在实际项目中需要优化。很多优化的方法都用CSS美化按钮的原生样式，或用图片来代替原生样式。本文描述了使用C

秒速五厘米/ 2022年06月13日 06:24/ 0 赞/ 352 阅读

相关 css 按钮按下样式

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

布满荆棘的人生/ 2022年02月20日 05:17/ 0 赞/ 519 阅读

相关 CSS按钮样式

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <t

朴灿烈づ我的快乐病毒、/ 2022年02月05日 12:59/ 0 赞/ 393 阅读

相关 css小技巧,菜单栏按钮hover样式与按钮默认样式冲突

![在这里插入图片描述][20191028113226132.png] 蓝色背景是默认样式，灰色背景是`hover`样式。初写菜单栏时，代码夸夸夸一顿敲。发现把鼠标移到蓝

野性酷女/ 2021年07月04日 18:48/ 1 赞/ 829 阅读