Text transparent issue with background color - css

Question

i'm making a button and I want to achieve an insteresting effect that you can see here.
The problem is that when on hover I put to the text rgba(0,0,0,0.0); all the button turns white, even the text.
Here's my code so far:
.button{
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
}
.button:hover{
background: #fff;
color: rgba(0,0,0,0.0)
}

Answer 1

The reason is because your hover color: was set to transparent, so of course it will be white. Try something simpler like below:
.button {
color: blue;
background: white;
padding: 5px 10px;
border: 3px solid blue;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s;
}
.button:hover {
color: white;
background: blue;
}
button

Answer 2

The problem is that, you have set the text color opacity to 0 so it is like your text is completely transparent. You can simply match it to your body's background color like I did below. No need to mention the opacity, it is 1 by default.
Fixed and working code snippet:
body{
background: #0E80C6;
}
.button{
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
background: transparent; /* background changed to transparent so it shows the body's background color */
}
.button:hover{
background: #fff;
color: #0E80C6; /* color matched to that of the background */
}
<button class="button">Button</button>

Answer 3

Your issue was you had the opacity of the text color set to 0%. The last letter in rgba means "alpha" or opacity.
body {
background-color: rgba(42, 148, 245, 1.00);
}
.button {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: transparent;
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
padding-left: 40px;
padding-right: 40px;
cursor: pointer;
}
.button:hover {
background: #fff;
color: rgba(42, 148, 245, 1.00);/*Set this to whatever you have for the background color. the "1.00" is the opacity"*/
}
<input type="button" value="button" class="button">

Answer 4

RGBA(red, green, blue, alpha)
The problem is you had the opacity(alpha value) of text is 0
body{
background: blue
}
.button{
background: transparent;
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
}
.button:hover{
background: #fff;
color: blue
}
<button class="button">Button</button>