使按鈕背景輪廓在幾秒鐘後消失

Question

im後面的效果如下：按鈕看起來不像按鈕（即邊框：無），單擊時我希望焦點輪廓在n秒後淡出。 我如何實現這一目標？ 謝謝

Answer 1

只需添加一個轉換。重要的是要記住，你需要轉換輪廓顏色，而不是大綱。

.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。

Answer 2

爲了得到這樣的效果邊框比外形好，我打得有點與它爲您和結果如下：

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>