如何解决当按钮处于活动状态时,能否仅按比例缩小按钮上的文本?
我有一个单元格编号,并为其加上了阴影和填充,看起来像一个按钮。由于它是可单击的,因此当“按钮”处于活动状态时,我更改了框阴影上的设置,因此您似乎真的在按了它。 为此,当您单击/触摸时,它会按比例缩小一点,但是会同时缩放数字和“按钮”。 我想做的只是在活动时按比例缩小数字,但是我不知道怎么做。我试图将数字放在一个范围内,但不适用于:active伪(我认为是因为文本不可单击)。 还有其他方法还是我应该做一个按钮?
我同时提供了代码和网页。该代码将呈现出可怕的效果,因此请查看网页上的单元格编号。 (请以移动模式进行检查。我首先将其安装为移动设备,尚无媒体查询。)Webpage Here
.cellnumber {
/* Box-shadow */
Box-shadow: 5px 5px 10px white inset,-2px -2px 10px rgba(30,30,.5) inset;
padding: 10px 15px;
padding-bottom: 3px;
border-radius: 10px;
transition: all .35s;
}
.cellnumber:active {
Box-shadow: 5px 5px 20px rgba(30,.3) inset,-5px -5px 20px rgba(90,90,.1) inset;
transform: scale(.97);
}
.paolo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid black;
padding: 30px 0;
padding-bottom: 55px;
margin-bottom: 50px;
}
.numeroandiconcell {
display: flex;
justify-content: space-around;
align-items: center;
}
.cellnumber {
text-decoration: none;
color: black;
font-size: 50px;
margin-top: 40px;
}
<div class="paolo">
<div class="numeroandiconcell">
<a class="cellnumber" href="tel:+393475924197">347 592 4197</a>
</div>
</div>
谢谢!
解决方法
我将文本包裹在div
中,并将scale
放在该div上,同时在.cellnumber
上保留阴影,这有效
.cellnumber {
/* box-shadow */
box-shadow: 5px 5px 10px white inset,-2px -2px 10px rgba(30,30,.5) inset;
padding: 10px 15px;
padding-bottom: 3px;
border-radius: 10px;
transition: all .35s;
}
.cellnumber div {
/* box-shadow */
transition: all .35s;
}
.cellnumber:active {
box-shadow: 5px 5px 20px rgba(30,.3) inset,-5px -5px 20px rgba(90,90,.1) inset;
}
.cellnumber:active div {
transform: scale(.97);
}
.paolo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid black;
padding: 30px 0;
padding-bottom: 55px;
margin-bottom: 50px;
}
.iconandname {
padding: 10px 0;
text-align: center;
}
.contactname {
font-size: 50px;
position: relative;
top: 5px;
}
.numeroandiconcell {
display: flex;
justify-content: space-around;
align-items: center;
}
.cellnumber {
text-decoration: none;
color: black;
font-size: 50px;
margin-top: 40px;
}
.iconasmartphone {
position: relative;
top: 5px;
}
.tap {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
top: 20px;
}
.chiamaconuntocco {
font-size: 25px;
<div class="paolo">
<div class="numeroandiconcell">
<a class="cellnumber" href="tel:+393475924197">
<div>347 592 4197</div>
</a>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。