我用漸變制作了這個簡單的按鈕，但是如何使過渡起作用？我嘗試使用transition: .2s linear，但它不起作用。
.contact_button {
color: white;
font-size: 20px;
width: 130px;
height: 50px;
border: solid 4px transparent;
border-radius: 80px;
background-image: linear-gradient(black, black), linear-gradient(to right ,#00AEAD, #72CC50);
background-origin: border-box;
background-clip: content-box, border-box;
cursor: pointer;
}
.contact_button:hover {
background-image: linear-gradient(transparent, transparent), linear-gradient(to right ,#00AEAD, #72CC50);
}<button class="contact_button">Contact</button>uj5u.com熱心網友回復：
使用不同的方式進行操作mix-blend-mode，您可以將過渡應用于background-color
.contact_button {
color: white;
font-size: 20px;
width: 130px;
height: 50px;
border: solid 4px transparent;
border-radius: 80px;
background:
linear-gradient(to right ,#00AEAD, #72CC50) border-box,
#000 content-box;
background-blend-mode:darken;
cursor: pointer;
transition:0.5s;
}
.contact_button:hover {
background-color:#0000;
}<button class="contact_button">Contact</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/410092.html
標籤：