Text transparent issue with background color

Question

i'm making a button and I want to achieve an insteresting effect that you can see here.

enter image description 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)
}

See [Show Image Under Text](http://css-tricks.com/image-under-text/) — Oriol, Jan 14 '15 at 04:50

score 1 · Answer 1 · answered Jan 14 '15 at 04:45

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;
}

<a href="alink.html" class="button">button</a>

answered Jan 14 '15 at 04:45

Ian Hazzard

7,661
7
34
60

If I do that the text sets its color to blue on hover, I want it to be the color of the background.. – Nico Pavlotsky Jan 14 '15 at 04:47
If it's the color of the background, it'll be invisible, because it'll blend in with the background color. – Ian Hazzard Jan 14 '15 at 04:48
I mean the color of the background image, not the color of the background of the button – Nico Pavlotsky Jan 14 '15 at 04:51
That's not very easy to do in CSS. http://stackoverflow.com/questions/9082909/cut-out-text-in-css-possible – Ian Hazzard Jan 14 '15 at 04:55

score 0 · Answer 2 · answered Jan 14 '15 at 04:48

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>

see my comment above, what if I want the text to be like the background (and if the background isn't a flat color?) — Nico Pavlotsky, Jan 14 '15 at 04:52

score 0 · Answer 3 · answered Jan 14 '15 at 04:50

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">

score 0 · Answer 4 · answered Jan 14 '15 at 06:59

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>

Text transparent issue with background color

4 Answers4