CSS button hover effect not working

Question

i am trying to do a hover effect with css something super simply, but i'm over looking something, im trying to have the user to be able to hover over a button and have a light shade of white with an opacity applied. But whenever i am doing so my border of the button disappears, I know this because I am targeting the button element. So how does this work without targeting the button element and still keeping the border from not going away. My jsfiddle link is below.

https://jsfiddle.net/bvcxtds/6Lr501g1/

and here is my markup

<button><a>SIGN UP</a></button>

and my css

button {
    border: 1px solid white;
    background: none;
    border-radius: 25px;
    width: 150px;
}
button > a {
    color: white;
}

button:hover {
    opacity: 0.2;
    background: white;
}
body {
    background: black;
}

And shouldn't it be ".button", with a period before?

user5306470
– user5306470

2015-10-14 20:34:15 +00:00
Commented Oct 14, 2015 at 20:34 — user5306470
– user5306470, Commented Oct 14, 2015 at 20:34

Guffa · Accepted Answer · 2015-03-23 00:49:08Z

3

The opacity applies to the entire element, not only the background. The border doesn't actually disappear, it becomes the same color as the background.

Use a background color with an alpha value instead:

button:hover {
  background: rgba(255,255,255,0.2);
}

Demo: https://jsfiddle.net/6Lr501g1/1/

answered Mar 23, 2015 at 0:49

Guffa

703k112 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Papaya Labs · Accepted Answer · 2015-03-23 00:48:15Z

0

Replace 'background' for 'color':

button:hover {
  opacity: 0.2;
  color: white;
}

answered Mar 23, 2015 at 0:48

Papaya Labs

1,0899 silver badges12 bronze badges

3 Comments

Guffa Over a year ago

The text is already white, and that doesn't keep the opacity from affecting the border.

hello world Over a year ago

@Guffa is correct, but thanks for helping me out tho! appreciate it.

Papaya Labs Over a year ago

True, I dont understand the question.:P

Hamza Alayed · Accepted Answer · 2015-03-23 00:54:20Z

0

small changes a and button

button {
    border: 1px solid white;
    background: none;
    border-radius: 25px;
    width: 150px;
}
button a{
    color:#FFF
}



button:hover {
    opacity: .5;
    background: white;
}
button:hover a{
    color: #060606;
  opacity: 1;
}
body {
    background: black;
}

JSFiddel

answered Mar 23, 2015 at 0:54

Hamza Alayed

6435 silver badges18 bronze badges

Collectives™ on Stack Overflow

CSS button hover effect not working

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related