所以，我有一個按鈕，它的末尾添加了一個 Font Awesome 圖示。我正在使用:after按鈕來顯示圖示，效果很好。
我有一個簡化的 CSS 過渡，但它并沒有按我的預期作業。我希望按鈕文本和:after文本同時放松。現在，按鈕文本緩和然后:after文本緩和......不是一個流暢的過渡。這就像因為過渡而有 0.5 秒的延遲。
這是我的按鈕代碼：
.gform_button {
background: #363794;
border: 2px solid #363794;
border-radius: 50px;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;
letter-spacing: 1px;
margin: 20px 0 0;
padding: 15px;
text-decoration: none;
text-transform: uppercase;
transition: all 0.5s ease;
}
.gform_button:hover {
color: #ff9b00;
cursor: pointer;
}
.gform_button:after {
color: #fff;
content: "\f135";
font: var(--fa-font-solid);
font-size: 16px;
margin-left: 5px;
}
.gform_button:hover:after {
color: #ff9b00;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button class="button gform_button" id="gform_submit_button_1">
<span>Submit</span>
</button>我很確定關鍵是我的過渡標簽，我想這是因為我有過渡：all因為我知道這會單獨影響每個專案。我以前見過這個，所以我認為這是一個快速修復（最初）。我想如果我改為all，color我會做生意，但它的功能仍然相同 - 按鈕文本顯示，然后在 0.5 秒后:after顯示。
我無法調整實際代碼，因為該按鈕是由 WordPress 網站生成的，這就是為什么 using:after在大多數情況下是一個很好的解決方案。
有沒有辦法我可以重做一些事情，以便它們（按鈕文本和:after）在它們轉換時同時改變顏色？
uj5u.com熱心網友回復：
并不是它們以不同的速度轉換——文本在轉換顏色，而圖示不是。懸停時圖示會立即更改。
那是因為您在 and 上指定了顏色值:after，:hover:after并且它沒有過渡。
最明顯的解決方法是添加一個過渡，對吧？
但是，更好的是：取而代之的是，color從選擇器中洗掉值:after，并讓它繼承父級的顏色！
（另外，你應該遠離它是正確的——轉換在大多數anyCSS 屬性上性能非常昂貴，所以你應該始終準確地指定你想要的那些）
.gform_button {
background: #363794;
border: 2px solid #363794;
border-radius: 50px;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;
letter-spacing: 1px;
margin: 20px 0 0;
padding: 15px;
text-decoration: none;
text-transform: uppercase;
transition: color 0.5s ease;
}
.gform_button:hover {
color: #ff9b00;
cursor: pointer;
}
.gform_button:after {
content: "\f135";
font: var(--fa-font-solid);
font-size: 16px;
margin-left: 5px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button class="button gform_button" id="gform_submit_button_1">
<span>Submit</span>
</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/522057.html
標籤：htmlcss按钮CSS 过渡
下一篇：文本Quarto中的下載按鈕