# 图标悬停圆形背景效果

把鼠标移到下面的 T 恤图标上，就会出现类似“铃铛”示例的浅灰圆形背景。

↑ hover 查看效果

## CSS 核心代码（可复制）

    .icon-hover-btn {
      position: relative;
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: #333;
      cursor: pointer;
      transition: color 0.2s ease;
    }
    .icon-hover-btn::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: #f2f3f5;
      transform: scale(0.6);
      opacity: 0;
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                  opacity 0.2s ease;
    }
    .icon-hover-btn:hover::before,
    .icon-hover-btn:focus-visible::before {
      transform: scale(1);
      opacity: 1;
    }
    .icon-hover-btn svg {
      position: relative;
      z-index: 1;
      width: 22px;
      height: 22px;
    }

## Element Plus 用法示例

    <el-button class="icon-hover-btn" link>
      <el-icon size="22"><Upload /></el-icon>
    </el-button>