[英]CSS button transition linear-gradient background into transparent background
I have a button with a linear-gradient background, orange border, and some text. 我有一个带有线性渐变背景,橙色边框和一些文字的按钮。 When I hover over the button, I want the background to become transparent without changing the other properties of the button.
当我将鼠标悬停在按钮上时,我希望背景变为透明而不更改按钮的其他属性。
I've tried to transition the opacity to 0, but obviously, this will hide the border and text. 我试图将不透明度转换为0,但显然,这将隐藏边框和文本。 I've also tried transitioning the background, but it does not work because I don't have an endpoint to transition to since it needs to be transparent.
我也尝试过转换背景,但它不起作用,因为我没有要转换到的端点,因为它需要透明。
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>
Use a pseudo element for the background and you can easily do this: 使用伪元素作为背景,您可以轻松地执行此操作:
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>
Here is another idea without the use of pseudo element where you can rely on changing the background-color
and background-size
. 这是另一个没有使用伪元素的想法,你可以依赖于改变
background-color
和background-size
。 The trick is to keep one of the gradient color transparent so we can see the background-color
(you can have transition on this one to transparent). 诀窍是保持其中一个渐变颜色透明,这样我们就可以看到
background-color
(你可以将这个渐变颜色转换为透明background-color
)。 Then you increase the background-size
to hide the bottom color and we only see the transparent. 然后你增加
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>
Or consider adjusting background-size
to have another kind of transition: 或者考虑调整
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>
In Chrome with Experimental Web Platform features enabled ( see ) we can use: 在启用了实验性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>
This might help: 这可能有所帮助:
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>
I made with javascript and CSS variables. 我用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.