如何创建左右带深色区域的圆角渐变按压式按钮？

以下是调整后的完整代码，可实现你需要的按钮效果：

HTML 示例 #

<a href="#" class="gradient-btn">按钮文本</a>

CSS 样式 #

.gradient-btn {
    /* 基础布局与文字样式 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: xx-large;
    padding: 1em 2em;
    color: #fff;
    text-decoration: none;
    cursor: pointer;

    /* 圆角与背景设置 */
    border-radius: 12px;
    background: 
        linear-gradient(90deg, #3f51b5, transparent) left / 20% 100% no-repeat,
        linear-gradient(270deg, #3f51b5, transparent) right / 20% 100% no-repeat,
        #2196f3;

    /* 平滑过渡 */
    transition: all 0.3s ease;
}

/* 按压交互效果 */
.gradient-btn:active {
    background-color: #1976d2;
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 可选：鼠标悬浮增强效果 */
.gradient-btn:hover {
    background-color: #42a5f5;
}

关键调整说明 #

• 用inline-flex替代无效的place-content，实现按钮内容的居中对齐
• 通过多层背景渐变，分别在左右两侧生成深色到透明的过渡区域，中间保留主蓝色背景
• 添加border-radius实现圆角效果
• 为:active状态添加位移和背景色加深，模拟真实按压的触感
• 缩短过渡时长至0.3秒，让交互反馈更自然

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