使用CSS复刻Ubuntu文件管理器按钮的技术求助

你可以通过给text-shadow添加多层阴影来实现文本底部的细微高光，调整后的CSS代码如下：

.folder-button{
    background-color: #565656;
    color: transparent;
    /* 添加顶部浅色阴影模拟文本底部高光，同时优化原有阴影参数 */
    text-shadow: 
        0 -1px 1px rgba(255,255,255,0.6),
        0 2px 3px rgba(0,0,0,0.3);
    -webkit-background-clip: text;
       -moz-background-clip: text;
            background-clip: text;

    border-radius: 5px;
    padding: .8em 1.8em;
    cursor: pointer;
    box-shadow: inset -4px -7px 12px 2px #0000001f;
    border-width: 1px;
    border-color: #bfbfbf;
    border-style: solid;
    font-weight: 600;
    font-family: sans-serif;
    position: relative;
    top: 2em;
}

<a href="#" class= "folder-button">Some button</a>

改动说明： #

• 新增0 -1px 1px rgba(255,255,255,0.6)这层阴影：向上偏移1px的浅色半透明阴影，模拟文本底部的高光质感，让文字呈现轻微立体凸起效果
• 调整原有阴影颜色为rgba(0,0,0,0.3)，让文字阴影更贴近Ubuntu按钮的沉稳质感

调整后文本的底部高光效果会更贴近目标设计，同时保持整体按钮风格统一。

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