当按钮处于活动状态时，能否仅按比例缩小按钮上的文本？

问题描述

我有一个单元格编号，并为其加上了阴影和填充，看起来像一个按钮。由于它是可单击的，因此当“按钮”处于活动状态时，我更改了框阴影上的设置，因此您似乎真的在按了它。 为此，当您单击/触摸时，它会按比例缩小一点，但是会同时缩放数字和“按钮”。 我想做的只是在活动时按比例缩小数字，但是我不知道怎么做。我试图将数字放在一个范围内，但不适用于：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:[phone]">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:[phone]">
      <div>347 592 4197</div>
    </a>
  </div>
</div>