I have a button with a linear gradient background, an orange frame and text.

When I hover the cursor over a button, I want the background to become transparent without changing the other properties of the button. I tried to translate the opacity to zero, but obviously it will hide the border and the text.

I also tried to move the background , but this does not work, because I do not have an end point for the transition , since the background must 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>

  • 2
    association: stackoverflow.com/q/54855781/7394871 - Alexandr_TT
  • As a different name must be translated, probably - Stranger in the Q
  • one
    @Alexandr_TT, translation of the title - as the name of the product on aliexpress)) - Qwertiy ♦
  • one
    @Alexandr_TT, "Smoothly changing the background of the button from gradient to transparent" - good? - Qwertiy ♦
  • one
    How to smoothly change the button background from a linear gradient to a transparent one, something like this - Stranger in the Q

2 answers 2

When using a pseudo-element for the background, 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's another idea without using a pseudo-element, where you can use background-color and background-size changes.

The trick is to keep one of the gradient colors transparent so that we can see the background-color (you can have a transition to transparent).

Then you increase the background-size to hide the bottom color, and we see only the transparent one.

 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 think about adjusting the background size to have a different 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>

    Currently, this solution is supported only by Chrome with the Experimental Web Platform features ( namely ) enabled:

     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>

    screenshot of chrome settings

    screen video

    • one
      @Alexandr_TT, okay, nakhimichil)) True, we still have to wait until browsers start this without flags ... In the meantime, enjoy the exception in the console and gifs :) - Qwertiy ♦
    • Let's continue the discussion in the chat . - Qwertiy ♦ pm