把鼠标移到下面的 T 恤图标上，就会出现类似“铃铛”示例的浅灰圆形背景。
+ +.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;
+}
+
+ <el-button class="icon-hover-btn" link> + <el-icon size="22"><Upload /></el-icon> +</el-button>+