求帮忙优化CSS：帖子底部的“展开隐藏内容”按钮太不明显，多个新用户没看到

比如该帖子底部的“展开隐藏内容”按钮：

https://hu60.cn/q.php/bbs.topic.96470.html

图片.png

已经接到超过3起用户反馈，他们最开始没看到这个“展开隐藏内容”按钮，经过我的提醒才找到。

秀才

@Ta / 2021-03-05 / 样 / 源

.floor_fold_bar{
background-color: #f0ad4e;
border-color: #eea236;
padding: 20px;
}
HUAWEI Mate X2(冰晶蓝)

Curtion

@Ta / 2021-03-05 / 样 / 源

使用手机在百度上随便搜索一篇文章，点进去就会有大量的“阅读全文”按钮作为参考
红米K30 Pro 变焦版

hik

@Ta / 2021-03-05 / 样 / 源

点击页面任何地方都能触发不就行了

$("body").click(function(){
　　　　$('#floor_fold_bar_0 button').trigger("click");　　
});

https://cway.top

.floor_fold_bar { text-align: center; background: transparent; top: -45px; position: relative; } .floor_fold_bar button { background: transparent; width: 100%; color: #333; height: 45px; font-size: large; border-radius: 0; border: 0; background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0)),color-stop(70%, #fff)); background-image: linear-gradient( -180deg ,rgba(255,255,255,0) 0%,#fff 70%); }

<style> .button { background-color: #53B1A8; border: none; color: white; padding: 8px; text-align: center; text-decoration: none; display: inline-block; margin: 0px; cursor: pointer; border-radius: 8px; border: none; outline: none; } .button:hover { background-color: #499a92; box-shadow: 0 5px #666; } .button:active { background-color: #3c7973; box-shadow: 0 5px #666; transform: translateY(4px); } </style> </head> <body> <button class="button">展开隐藏内容</button> </body>

display: block; width: 100%; border-radius: 0; padding: 50px 0; position: relative; background-image: linear-gradient(rgb(255 255 255 / 46%), #FFF); margin-top: -90px; background-color: transparent; font-size: 18px; color: #065279; border: none; box-shadow: 0 0 20px 0px #fff;

.oPadding {
    position: relative;
    padding-top: .18rem;
}

.gradient {
    position: absolute;
    top: -79px;
    left: 0;
    height: 80px;
    width: 100%;
    background-image: -webkit-linear-gradient(top,rgba(255,255,255,0),#fff);
    background-image: linear-gradient(
-180deg
,rgba(255,255,255,0),#fff);
}

.newUnfoldFullBox {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    padding-top: .05rem;
}

.newUnfoldFullBox .newUnfoldIcon {
    width: .22rem;
    height: .22rem;
    margin-bottom: .12rem;
    position: relative;
    -webkit-animation: backArrowFlow .8s ease infinite;
    animation: backArrowFlow .8s ease infinite;
    background: url(data:image/png;base64,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) no-repeat 50%/contain;
}

.newUnfoldFullBox .backFlowText {
    font-family: PingFangSC-Regular;
    font-size: .16rem;
    color: #4e6ef2;
    letter-spacing: 0;
    text-align: center;
    line-height: .16rem;
}
        <a class="userat" href="#" onclick="atAdd('-webkit-keyframes',this);return false">@</a><a class="userinfo" href="user.info.0.html">-webkit-keyframes</a> backArrowFlow {
            0%, to {
                bottom: 0
            }

            50% {
                bottom: .11rem
            }
        }

        <a class="userat" href="#" onclick="atAdd('keyframes',this);return false">@</a><a class="userinfo" href="user.info.0.html">keyframes</a> backArrowFlow {
            0%, to {
                bottom: 0
            }

            50% {
                bottom: .11rem
            }
        }

<div class="oPadding"><div class="gradient"></div><div class="newUnfoldFullBox contentPadding"><div class="newUnfoldIcon"></div><div class="backFlowText">打开百度APP阅读全文</div></div></div>

小米MIX2s(白)

回复列表(20|隐藏机器人聊天)

1

秀才

@Ta / 2021-03-05 / 样 / 源

.floor_fold_bar{
background-color: #f0ad4e;
border-color: #eea236;
padding: 20px;
}
HUAWEI Mate X2(冰晶蓝)
2

秀才

@Ta / 2021-03-05 / 样 / 源

HUAWEI Mate X2(冰晶蓝)
3

Curtion

@Ta / 2021-03-05 / 样 / 源

使用手机在百度上随便搜索一篇文章，点进去就会有大量的“阅读全文”按钮作为参考
红米K30 Pro 变焦版
4

hik

@Ta / 2021-03-05 / 样 / 源
点击页面任何地方都能触发不就行了
```
$("body").click(function(){
　　　　$('#floor_fold_bar_0 button').trigger("click");　　
});
```
https://cway.top
5

暗

@Ta / 2021-03-05 / 样 / 源

楼主，这个时候你应该主动@老虎会游泳，
Dark's blog---精品域名出售---淘宝优惠券

读书顶个鸟用

这样搞更加不明显了
小米Mix3

8

ponyoung

@Ta / 2021-03-05 / 样 / 源

容易忽视的原因无非就是和背景色混合，不易区分，加上主题色突出按键存在不就行了，默认按键样式挺好的，搞太复杂或是炫酷容易喧宾夺主
9

方妹

@Ta / 2021-03-05 / 样 / 源

这总不会看不清吧

甚至有点和主题风格不搭
Redmi K30 Pro
10

呆哥

@Ta / 2021-03-05 / 样 / 源

大可不必，直接显示所有内容，侧边加个直达评论区按钮，点一下直接跳转到帖子末尾
loc.cc / 非人类论坛

方妹

视频链接

Redmi K30 Pro

12

000

@Ta / 2021-03-05 / 样 / 源

@ponyoung，哈我也觉得其实就是颜色太接近背景白色存在感太低造成

水木易安

这个怎么样

▲▼

15

ponyoung

@Ta / 2021-03-05 / 样 / 源

@000，是啊，和主题色相近的颜色突出就行了，搞些花里胡哨的虚化，反而变味了
16

水木易安

@Ta / 2021-03-05 / 样 / 源

小米MIX2s(白)more.html（5.70 KB）
18

枫叶飘

@Ta / 2021-03-05 / 样 / 源

有时候不注意我也没发现有个展开按钮哈哈哈，给按钮加点醒目的颜色就好了
人生若只如初见
19

xggz

@Ta / 2021-03-05 / 样 / 源
给按钮增加css样式
```
display: block;
width: 100%;
height: 40px;
font-size: 18px;
border-radius: 0;
```
效果：
20

小杨

@Ta / 2021-03-05 / 样 / 源

@老虎会游泳推荐这种方式，有渐变效果好一点
21

姜辰

@Ta / 2021-03-05 / 样 / 源

@小杨，好家伙，你这是让老虎学百度啊

添加新回复

回复需要登录。