CODEWITHSUNDEEP
htmlcss
hello world
hello world

Reputation: 1755

CSS button hover effect not working

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

Upvotes: 0

Views: 6165

Answers (3)

Hamza Alayed
Hamza Alayed

Reputation: 643

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

Upvotes: 0

Guffa
Guffa

Reputation: 700232

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/

Upvotes: 3

Papaya Labs
Papaya Labs

Reputation: 1089

Replace 'background' for 'color':

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

Upvotes: 0

Related Questions