按钮hover时如何固定背景阴影仅让按钮执行translate平移？

为按钮设置hover效果时，按钮与其背景阴影会同步移动。希望背景阴影保持固定不动，仅让按钮执行transform: translate(-5px, -5px);的平移操作，该如何实现？

原代码示例 #

CSS #

.install span {
    font-family: Poppins, sans-serif;
    font-style: normal;
    font-weight: 600;
    background-color: rgba(241, 241, 241, 1.0);
    color: #33302f;
    fill: #33302f;
}

.install {
    margin-left: 1rem;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 6px 6px 0px rgba(51, 48, 47, 1.0);
    width: 12rem;
    border: 1px solid #33302f;
    position: relative;
    transition: transform 0.3s ease
}

.install:hover {
    transform: translate(-5px, -5px);
}

.install:hover::before {
    transform: translate(0, 0);
}

HTML #

<button class="install">
  <span>Install Theme</span>
</button>

解决方案 #

核心思路是将阴影与按钮视觉主体分离：用伪元素承载固定阴影，让按钮内部的文本容器作为可平移的交互主体。修改后的代码如下：

修改后的CSS #

.install {
    margin-left: 1rem;
    padding: 0;
    border: none;
    position: relative;
    width: 12rem;
    background: transparent;
}

.install::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 6px 6px 0px rgba(51, 48, 47, 1.0);
}

.install span {
    font-family: Poppins, sans-serif;
    font-style: normal;
    font-weight: 600;
    background-color: rgba(241, 241, 241, 1.0);
    color: #33302f;
    fill: #33302f;
    display: block;
    border-radius: 4px;
    padding: 10px;
    border: 1px solid #33302f;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.install:hover span {
    transform: translate(-5px, -5px);
}

原理说明 #

1. 阴影分离：通过.install::before伪元素创建独立的阴影层，绝对定位与按钮容器完全重合，不参与任何变换操作，保持固定位置。
2. 主体转移：将按钮原本的背景、边框、内边距等视觉样式转移到内部的<span>元素上，让<span>成为实际的交互视觉主体。
3. 独立变换：hover时仅对<span>应用translate平移，此时底层伪元素的阴影不受影响，完美实现“按钮平移、阴影不动”的效果。

内容的提问来源于stack exchange，提问作者ckot234