Can you make the text in a button transparent through the button background?-CodePudding

I have a page with an animated gradient background, and on the page is This Button. What I want to achieve is when you mouse over the button, the button becomes white, and the text becomes transparent, showing the gradient background underneath. Is it possible to achieve this in CSS? Here's the CSS I've got so far:

button {
display:inline-block;
background-color: transparent;
padding:0.5em 3em;
border:0.16em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
box-sizing: border-box;
text-decoration:none;
text-transform:uppercase;
font-family:'Roboto',sans-serif;
font-weight:400;
color:#FFFFFF;
text-align:center;
transition: all 0.15s;

}

button:hover{
color:???;

background-color: white;

}

button:active{
background-color: #BBBBBB;
border-color: #BBBBBB;

}

CodePudding user response：

body {
    background-color:black;
}

button {
    display:inline-block;
    background-color: blue;
    padding:0.5em 3em;
    border:0.16em solid #FFFFFF;
    margin:0 0.3em 0.3em 0;
    box-sizing: border-box;
    text-decoration:none;
    text-transform:uppercase;
    font-family:'Roboto',sans-serif;
    font-weight:400;
    color:#FFFFFF;
    text-align:center;
    transition: all 0.15s;
}

button:hover {
  background-color: transparent;
  color: rgba(234, 240, 246, 0.1);
}

<head></head>
<body>
  <button>BEGIN GAME</button>
</body>

Maybe use opacity or like my code

CodePudding user response：

You'll want to use the background-clip css property.

You can set the background-color or image on the element and then use background-clip to make the background show through the text.

In my example, the background of the button is purple and when you hover the button, the text becomes transparent and shows the purple background of the button

.body {
  background-color: black;
}

.btn {
  font-weight: 900;
  font-size: 20px;
  background-color: purple;
}

.btn:hover {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

<body >
<button >BUTTON TEXT</button>
</body>