使按钮背景轮廓在几秒钟后消失

问题描述：

im后面的效果如下：按钮看起来不像按钮（即边框：无），单击时我希望焦点轮廓在n秒后淡出。我如何实现这一目标？谢谢使按钮背景轮廓在几秒钟后消失

添加一些脚本/代码，所以我们可以帮助你。 –

它必须使用javascript吗？如果可能，我宁愿只使用css –

css可以做到这一点 –

答

只需添加一个转换。重要的是要记住，你需要转换轮廓颜色，而不是大纲。

.no-button { 
 
    margin:15px; 
 
    border:none; 
 
} 
 

 
.no-button:focus { 
 
    outline-color:transparent; 
 
    -webkit-transition: outline-color .7s ease-out 1s; 
 
    -moz-transition: outline-color .7s ease-out 1s; 
 
     -o-transition: outline-color .7s ease-out 1s; 
 
\t  transition: outline-color .7s ease-out 1s; 
 
}

<button class="no-button">This is no button</button>

第一次（.7s）是duration，第二个（1s）是delay。

答

为了得到这样的效果边框比外形好，我打得有点与它为您和结果如下：

button { 
 
    background: border-box linear-gradient(#841518, #4C0C00) no-repeat; 
 
    font-size: x-large; 
 
    font-family: Sans; 
 
    border: none; 
 
    transition: border-color 0.7s 0.2s; 
 
    border-width: 15px; 
 
    box-sizing: border-box; 
 
    height: 80px; 
 
    width: 220px; 
 
    display: inline-block; 
 
} 
 

 
button:focus { 
 
    border-style: solid; 
 
    border-color: transparent; 
 
    outline: none; 
 
}

<button type="button">Click here</button>

使按钮背景轮廓在几秒钟后消失

相关推荐