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

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;

}

htmlcss


Solution 1:[1]

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

Solution 2:[2]

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 class="body">
<button class="btn">BUTTON TEXT</button>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Restu Juniansah
Solution 2 brados

Related Questions