0
It is possible to apply effects of :hover
, :active
and :focus
on the tag Label
whole? I’m not getting it because the effect only applies to content
label...
body{
font-family:Helvetica,Arial;
}
.collapse{
margin-top: 50px;
transition:all .5s;
opacity:0;
}
label:hover{
background-color: green;
}
label:focus{
background-color: yellow;
}
label:active{
background-color: red;
}
label:before{
content: "Generic button";
padding: 6px 12px;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
border-color: #CCC;
}
#do-collapse{
visibility:hidden;
position:absolute;
}
#do-collapse:checked ~ .collapse{
margin-top:10px;
opacity:1;
}
<input type="checkbox" id="do-collapse"/>
<label for="do-collapse"></label>
<div class="collapse">
Something
</div>
I removed my answer precisely because there was already a similar question.
– NoobSaibot
besides having no answer, I can’t see where the question is similar to mine
– Jefter Rocha
Just put in your code:
label:hover:before
,label:focus:before
,label:active:before
... As it is in the answer to the quoted question.– NoobSaibot