5
votes

Bouton CSS transition arrière-plan dégradé linéaire en arrière-plan transparent

J'ai un bouton avec un arrière-plan dégradé linéaire, une bordure orange et du texte. Lorsque je passe la souris sur le bouton, je veux que l'arrière-plan devienne transparent sans changer les autres propriétés du bouton.

J'ai essayé de faire passer l'opacité à 0, mais évidemment, cela masquera la bordure et le texte. J'ai également essayé de faire la transition de l'arrière-plan, mais cela ne fonctionne pas car je n'ai pas de point de terminaison vers lequel effectuer la transition car il doit être transparent.

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

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;
}

html css linear-gradients

0 commentaires

4 Réponses :

0
votes

Cela peut aider:

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

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);
}

Donc, je viens de définir le survol sur un dégradé linéaire de transparent, car vous n'avez pas de couleur fixe.

1 commentaires

il n'y a pas de transition dans votre exemple

1
votes

J'ai créé avec des variables javascript et CSS.

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

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;
}

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);
});

0 commentaires

5
votes

Utilisez un pseudo élément pour l'arrière-plan et vous pouvez facilement le faire:

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

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%;
}

Voici une autre idée sans l'utilisation de pseudo élément où vous pouvez compter sur le changement de background-color et background-size . L'astuce est de garder l'une des couleurs du dégradé transparente afin que nous puissions voir la background-color (vous pouvez avoir une transition sur celle-ci vers transparente). Ensuite, vous augmentez la background-size pour masquer la couleur du bas et nous ne voyons que le transparent.

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

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%;
}

Ou envisagez d'ajuster background-size pour avoir un autre type de transition:

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

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;
}

1 commentaires

La dernière transition est exactement ce que j'allais mettre en œuvre après avoir compris comment passer à un arrière-plan transparent, alors merci beaucoup!

2
votes

Dans Chrome avec les fonctionnalités de la plate-forme Web expérimentale activées ( voir ), nous pouvons utiliser:

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

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;
}

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

0 commentaires