如何将按钮hover椭圆背景改为尺寸为长边141.4%的圆形？

现有代码片段中的按钮在鼠标悬停时会呈现椭圆形背景效果，当前该椭圆尺寸与按钮尺寸成比例。我希望将其修改为圆形，圆形宽度设为按钮较长维度的141.4%；若无法实现该逻辑，则以按钮宽度为准。请问应如何实现这一效果？

只需修改按钮伪元素的尺寸计算和定位方式，即可实现需求：

修改后的完整CSS代码 #

:root {
    --success: #0c0;
}

button {
    border: 2px solid;
    border-radius: 10px;
    cursor: pointer;
    margin: 1em 0.5em;
    padding: 10px 15px;
    transition: transform 1s;
}

button:active {
    transform: scale(90%);
}

button.animated {
    background-color: transparent;
    overflow: hidden;
    position: relative;
    transition: color 1s, border-color 1s, transform 0.2s;
    z-index: 1;
}

button.animated:hover {
    border-color: transparent;
}

button.animated::after {
    border: 0;
    border-radius: 50%;
    content: "";
    /* 取按钮宽/高中较大值的141.4%作为圆形直径，确保完全覆盖按钮 */
    width: calc(max(100%, 100%) * 1.414);
    height: calc(max(100%, 100%) * 1.414);
    /* 居中定位，避免尺寸变化时偏移 */
    left: 50%;
    top: 50%;
    opacity: 0;
    position: absolute;
    transform: translate(-50%, -50%) scale(0.1);
    transform-origin: center;
    transition: all 1s;
    z-index: -1;
}

button.animated:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.text,
button.animated.background::after {
    background-color: white;
}

.background,
button.animated.text:hover{
    color: white;
}

button.animated.text {
    border-color: var(--muted);
}

.success.text,
button.animated.success.background:hover {
    color: var(--success);
}

.success.background,
button.animated.success.text::after {
    background-color: var(--success);
}

button.animated.success.text:hover,
button.animated.success.background {
    border-color: var(--success);
}

关键修改点说明 #

• 圆形尺寸控制：使用calc(max(100%, 100%) * 1.414)定义宽高，max(100%,100%)会自动选取按钮自身宽度和高度中的较大值，乘以1.414（即√2，确保圆形能完全覆盖按钮的所有角落），同时保持宽高相等，实现标准圆形。
• 居中定位优化：将原有的left: -25%; top: -25%改为left:50%; top:50%，配合transform: translate(-50%, -50%)实现圆形在按钮内居中，避免按钮尺寸变化时圆形出现偏移。
• 过渡效果同步：hover状态下的transform同步调整为translate(-50%, -50%) scale(1)，保证缩放过程中圆形始终居中。

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