如何解决CSS按钮hover时无法实现ease-out背景透明过渡的问题

核心问题分析 #

• 你当前的hover状态与默认状态的box-shadow均为完全透明，两者无差异，因此看不到任何过渡效果
• 内阴影扫动的逻辑写反了：你想用内阴影实现横向过渡效果，需要用内阴影承载默认的按钮背景色，而非写在按钮的background-color属性上
• 过渡动画函数不符合需求，你需要的是ease-out而非ease-in
• 未考虑背景透明后的文字可读性：背景变透明后白色文字会和浅色背景融合，需要同步过渡文字颜色

调整后完整代码 #

HTML代码（无需修改） #

<div class="container">
<button class="btn-1">Get in Touch</button>
</div>

CSS代码 #

.container{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   text-align: center;
   /* 演示用父容器背景，可根据实际需求删除 */
   background: #f0f0f0;
   min-height: 100vh;
 }

.btn-1{
   width: 300px;
   height: 100px;
   border: none;
   /* 默认文字为白色，hover后变为深蓝色，可根据需求调整 */
   color: white;
   /* 按钮默认背景设为透明，用内阴影承载背景色 */
   background-color: transparent;
   border-radius: 4px;
   /* 初始状态内阴影扩散满整个按钮，显示为蓝色背景 */
   box-shadow: inset 0 0 0 300px rgb(25, 62, 148);
   /* 过渡改为ease-out，同时过渡box-shadow和color */
   transition: ease-out 0.3s;
   font-size: 2rem;
   outline: none;
   /* 可选：加边框，透明后也能看到按钮边界，不需要可删除 */
   border: 2px solid rgb(25, 62, 148);
 }

 .btn-1:hover{
    /* hover时内阴影向右偏移300px，蓝色阴影完全移出，按钮背景变为透明 */
    box-shadow: inset 300px 0 0 300px rgb(25, 62, 148);
    /* 背景透明后文字改为深色，保证可读性 */
    color: rgb(25, 62, 148);
 }

可选简化方案（无横向扫动效果，仅背景渐变透明） #

如果不需要横向扫动的过渡动画，只想实现背景直接渐变透明，可以用更简洁的写法：

/* 仅需修改btn-1和hover的相关属性即可 */
.btn-1{
   width: 300px;
   height: 100px;
   border: none;
   color: white;
   background-color: rgb(25, 62, 148);
   border-radius: 4px;
   transition: all ease-out 0.3s;
   font-size: 2rem;
   outline: none;
   border: 2px solid rgb(25, 62, 148);
 }

 .btn-1:hover{
    background-color: rgba(25, 62, 148, 0);
    color: rgb(25, 62, 148);
 }

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