实现菜单按钮Hover时转为X形并添加阴影克隆效果的方法

DevOps 小满

2026-8-6

实现鼠标悬停时按钮旋转并生成克隆阴影效果

可以通过CSS伪元素结合变换属性实现你要的克隆阴影效果，无需JS。以下是具体实现方案：

步骤1：调整按钮基础样式

首先给按钮添加相对定位，确保伪元素能正确定位在按钮下方：

.cta-button-menu {
    position: relative;
    box-sizing: border-box; /* 确保尺寸包含内边距和边框 */
    transition: all 1s ease; /* 统一设置过渡动画，hover和移出时都生效 */
    /* 保留你原有按钮的padding、字体、边框等样式 */
}

步骤2：添加伪元素实现克隆阴影

用::before伪元素创建一个和按钮完全一致的“克隆层”，默认隐藏在按钮下方，hover时同步旋转并偏移形成阴影效果：

/* 初始化克隆层 */
.cta-button-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(33, 182, 205, 0.3); /* 半透明同色系背景模拟阴影 */
    border: inherit; /* 继承按钮边框（如果有） */
    transition: all 1s ease;
    z-index: -1; /* 让克隆层在按钮下方 */
}

/* hover状态下的按钮与克隆层变换 */
.cta-button-menu:hover {
    transform: rotateZ(45deg);
    background: #21B6CD;
    color: white;
}

.cta-button-menu:hover::before {
    transform: rotateZ(45deg) translate(10px, 10px); /* 旋转后偏移，调整数值可改变阴影位置 */
}