How to make a button with a gradient rounded border and a transparent background?

Question

css

You need to make a button.

• rounded corners
  
• in the border gradient from top to bottom from transparency 0% to 100%
  
• the button must be transparent, because the background may be heterogeneous
  
• on hover fill with the same gradient, and on active it is the same with less transparency
  
• smooth background change by hover/active
  
• button width is not constant
  

I want the most elegant solution, without tags nested in the button.

Answer 1

The most elegant solution is to explain to the designer that he is wrong and that he needs to be redone in a normal way.