如何将文本移入按钮内，只有在我单击文本而不是单击按钮时才移动？参考。 （.button_text，.button_icon）

Question

.button__text {
    position:relative;
  
    transform:translate3d(0px, -4px, 0px);
    margin:0;
    align-self:end;
    grid-column:1/5;
    grid-row:2;

    text-align:center;
    font-size: 32px;
    font-weight:550;
    background-color: #aaaa;
    color: transparent;
    font-family: 'Nunito', sans-serif;
    
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    transition: .13s ease-in-out;
}

.button__text:active {
    transform:translate3d(0px, 0px, 0px);
}

Answer 1

您需要感觉到何时单击按钮，然后更改文本的翻译。

这是一个简单的片段 - 当按钮具有：活动时，其孩子会得到更改的定位。

.button__text {
  position: relative;
  transform: translate3d(0px, -4px, 0px);
  margin: 0;
  align-self: end;
  grid-column: 1/5;
  grid-row: 2;
  text-align: center;
  font-size: 32px;
  font-weight: 550;
  background-color: #aaaa;
  color: transparent;
  font-family: 'Nunito', sans-serif;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  transition: .13s ease-in-out;
}

button:active .button__text {
  transform: translate3d(0px, 0px, 0px);
}

<button><div class="button__text">click me</div></button>