CSS按鈕將線性漸變背景轉換為透明背景

Question

我有一個帶有線性漸變背景，橙色邊框和一些文字的按鈕。 當我將鼠標懸停在按鈕上時，我希望背景變為透明而不更改按鈕的其他屬性。

我試圖將不透明度轉換為0，但顯然，這將隱藏邊框和文本。 我也嘗試過轉換背景，但它不起作用，因為我沒有要轉換到的端點，因為它需要透明。

 body { background-color: darkblue; } .button { background-image: linear-gradient(red,yellow); border: solid orange 2px; border-radius: 10px; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 24px; } 

 <button class="button">Submit</button> 

Answer 1

使用偽元素作為背景，您可以輕松地執行此操作：

 body { background-color: darkblue; } .button { border: solid orange 2px; border-radius: 10px; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 24px; position: relative; overflow: hidden; z-index:0; background:transparent; } .button::before { content: ""; position: absolute; z-index:-1; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(red, yellow); transition:1s; } .button:hover::before { opacity:0; } 

 <button class="button">Submit</button> 

這是另一個沒有使用偽元素的想法，你可以依賴於改變background-color和background-size 。 訣竅是保持其中一個漸變顏色透明，這樣我們就可以看到background-color （你可以將這個漸變顏色轉換為透明background-color ）。 然后你增加background-size以隱藏底部顏色，我們只看到透明。

 body { background-color: darkblue; } .button { border: solid orange 2px; background-image: linear-gradient(transparent, yellow); background-size:100% 100%; background-color:red; border-radius: 10px; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 24px; transition:1s; } .button:hover { background-color:transparent; background-size:100% 500%; } 

 <button class="button">Submit</button> 

---

或者考慮調整background-size以進行另一種轉換：

 body { background-color: darkblue; } .button { border: solid orange 2px; background: linear-gradient(red, yellow), transparent; background-size:100% 100%; background-position:left; /*change this to change the way the transtion happen*/ background-repeat:no-repeat; border-radius: 10px; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 24px; transition:1s; } .button:hover { background-size:0% 100%; } 

 <button class="button">Submit</button> 

Answer 2

在啟用了實驗性Web平台功能的Chrome中（ 請參閱 ），我們可以使用：

 CSS.registerProperty({ name: '--alpha', syntax: '<number>', initialValue: 1, inherits: true, }) 

 body { background-color: darkblue; } .button { --alpha: 1; background: linear-gradient(rgba(255,0,0,var(--alpha)), rgba(255,255,0,var(--alpha))) transparent; border: solid orange 2px; border-radius: 10px; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 24px; transition: --alpha 1s linear; } .button:hover { --alpha: 0; } 

 <button class="button">Submit</button> 

Answer 3

這可能有所幫助：

 body { background-color: darkblue; } .button { background-image: linear-gradient(red,yellow); border: solid orange 2px; border-radius: 10px; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 24px; transition: 2s; z-index: 1000; } button:hover{ background:linear-gradient(transparent, transparent); } 

 <button class="button">Submit</button> 

因此，我只是將懸停設置為透明的線性漸變，因為您沒有固定的顏色。

Answer 4

我用javascript和CSS變量做了。

 const b = document.querySelector(".button"); b.addEventListener("mouseover",function(){ let i = 1; setInterval(function(){ if(i>0){ i=i - 0.009; b.style.setProperty("--a", i); b.style.setProperty("--b", i); } },5); }); b.addEventListener("mouseout",function(){ let i = 0; setInterval(function(){ if(i<1){ i=i + 0.009; b.style.setProperty("--a", i); b.style.setProperty("--b", i); } },5); }); 

 body { background-color: darkblue; } .button { --a:1; --b:1; background-image: linear-gradient(rgba(255,0,0,var(--a)),rgba(255,255,0,var(--b))); background-color:transparent; border: solid orange 2px; border-radius: 10px; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 24px; } 

 <button class="button">Submit</button>