标题: 求帮忙优化CSS:帖子底部的“展开隐藏内容”按钮太不明显,多个新用户没看到
时间: 2021-03-05
比如该帖子底部的“展开隐藏内容”按钮:
https://hu60.cn/q.php/bbs.topic.96470.html
已经接到超过3起用户反馈,他们最开始没看到这个“展开隐藏内容”按钮,经过我的提醒才找到。
『回复列表(20|显示机器人聊天)』
.floor_fold_bar{
background-color: #f0ad4e;
border-color: #eea236;
padding: 20px;
}
HUAWEI Mate X2(冰晶蓝)
.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%);
}
这样搞更加不明显了
小米Mix3
<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;
▲▼
小米MIX2s(白)
.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(白)