CSS按钮将线性渐变背景转换为透明背景 [英] 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.

我尝试将不透明度转换为0，但是显然，这将隐藏边框和文本.我也尝试过转换背景，但是它不起作用，因为我没有端点可以转换到该端点，因为它需要透明.

I've tried to transition the opacity to 0, but obviously, this will hide the border and text. 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>

这是不使用伪元素的另一个想法，您可以依靠它来更改background-color和background-size.技巧是使一种渐变颜色保持透明，这样我们就可以看到background-color(您可以将其渐变为透明).然后您增加background-size以隐藏底色，我们只会看到透明色.

Here is another idea without the use of pseudo element where you can rely on changing the background-color and 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). Then you increase the background-size to hide the bottom color and we only see the transparent.

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以进行另一种过渡:

Or consider adjusting background-size to have another kind of transition:

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>

这篇关于CSS按钮将线性渐变背景转换为透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！