html - 当按钮处于活动状态时，我可以只缩小按钮的文本吗？

Question

我有单元格号码，我给了盒子阴影和填充，它看起来像一个按钮。因为它是可点击的，所以当“按钮”处于活动状态时，我更改了框阴影的设置，所以看起来你真的在按下它。为此，当您单击/触摸时，它会按比例缩小一点，但会同时按比例缩放数字和“按钮”。我想做的是在活动时只缩小数字，但我不知道如何。我试图将数字放在一个跨度中，但不适用于 :active 伪（我认为因为文本不可点击）。有没有其他方法或者我应该做一个按钮？

我给你代码和网页。该代码将呈现可怕的所以看看网页，在单元格号码。（请在移动模式下检查它。我首先将它构建为移动设备，还没有媒体查询。） 网页在这里

  .cellnumber {
  /* box-shadow */
  box-shadow: 5px 5px 10px white inset, -2px -2px 10px rgba(30, 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, 30, 30, .3) inset, -5px -5px 20px rgba(90, 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>

谢谢你！

标签： htmlcssbuttonscale

Answer 1

我已将文本包装在 a 中div并将其scale放在该 div 上，同时将阴影保留在.cellnumber此作品上

  .cellnumber {
  /* box-shadow */
  box-shadow: 5px 5px 10px white inset, -2px -2px 10px rgba(30, 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, 30, 30, .3) inset, -5px -5px 20px rgba(90, 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>