CSS按钮点击位移仅点文本触发 如何实现全按钮区域响应

当前:active伪类直接绑定在.button__text元素上，仅当鼠标直接按压在文本元素的渲染区域内时，才会触发对应位移样式。点击按钮内图标、内边距等其他非文本区域时，无法匹配.button__text:active选择器，因此不会出现位移反馈。

将动效触发逻辑修改为：外层按钮容器被按压激活时，内部文本元素应用位移样式。只要点击按钮覆盖的任意区域触发了父容器的:active状态，内部文本就会执行位移动效。

1. 首先给按钮最外层容器统一添加类名，例如.custom-button，确保该容器覆盖全部按钮可点击区域
2. 保留.button__text的基础样式，删除原有的.button__text:active规则，新增父容器激活时的子元素样式：

.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;
}

/* 替换原有:active触发规则 */
.custom-button:active .button__text {
    transform:translate3d(0px, 0px, 0px);
}

如果需要按钮内的.button__icon图标和文本同步位移，直接扩展选择器即可：

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

• 不要给按钮内部的文本、图标等子元素设置会拦截点击的pointer-events属性，避免出现点击区域异常
• 如果按钮本身已有外层类名，不需要额外新增.custom-button，直接把选择器里的.custom-button替换成项目里实际的外层按钮类名即可

内容的提问来源于stack exchange，提问作者Dev.lish