I looked at W3 schools website W3Schools which explained styling buttons with CSS. I need to specify a button style when it is clicked. What is the pseudo-class selector for this? e.g. the hover button is:
.button:hover{
}
5 Answers
This button will appear yellow initially. On hover it will turn orange. When you click it, it will turn red. I used :hover and :focus to adapt the style.
(The :active selector is usually used of links (i.e. <a> tags))
button{
background-color:yellow;
}
button:hover{background-color:orange;}
button:focus{background-color:red;}
a {
color: orange;
}
a.button{
color:green;
text-decoration: none;
}
a:visited {
color: purple;
}
a:active {
color: blue;
}<button>
Hover and Click!
</button>
<br><br>
<a href="#">Hello</a><br><br>
<a class="button" href="#">Bye</a>5 Comments
Rachel Gallen
:active is usually used of links (i.e. <a> tags)
Mark Schultheiss
Since some common libraries commonly and in my opinion poorly use
.button for anchor links styled as buttons (I am looking at you bootstrap) and the OP has .button in the example perhaps expand this to include an anchor section with the :active? i.e. if they want a button they should use <button></button> but that is not YOUR fault :)Rachel Gallen
@MarkSchultheiss I actually didn't notice that in the question, well pointed out , but indeed why not use a button tag if a button is desired ? I'll edit the answer to include a link with class button....
Niraj
As per Mozilla documentation, one should use :active for button as well. developer.mozilla.org/en-US/docs/Web/CSS/:active
Qwerty
One must use
active instead of focus. Focus remains after button is depressed, active is only while mouse is down.If you just want the button to have different styling while the mouse is pressed you can use the :active pseudo class.
.button:active {
}
If on the other hand you want the style to stay after clicking you will have to use javascript.
Comments
There are three states of button
- Normal : You can select like this
button - Hover : You can select like this
button:hover - Pressed/Clicked : You can select like this
button:active
Normal:
.button
{
//your css
}
Active
.button:active
{
//your css
}
Hover
.button:hover
{
//your css
}
SNIPPET:
Use :active to style the active state of button.
button:active{
background-color:red;
}<button>Click Me</button>
Comments
Unfortunately, there is no :click pseudo selector. If you want to change styling on click, you should use Jquery/Javascript. It certainly is better than the "hack" for pure HTML / CSS. But if you insist...
input {
display: none;
}
span {
padding: 20px;
font-family: sans-serif;
}
input:checked + span {
background: #444;
color: #fff;
} <label for="input">
<input id="input" type="radio" />
<span>NO JS styling</span>
</label>Or, if you prefer, you can toggle the styling:
input {
display: none;
}
span {
padding: 20px;
font-family: sans-serif;
}
input:checked + span {
background: #444;
color: #fff;
} <label for="input">
<input id="input" type="checkbox" />
<span>NO JS styling</span>
</label>
2 Comments
Mark Schultheiss
Why checkbox and radio types? not buttons in my mind.
seanysean
@Mark Schultheiss You don't understand, if you ran the code snippets, maybe you would. The checkboxes are hidden, but you can take advantage of the :checked pseudo selector, which you must have the checkbox input to use. Like I mentioned in the post, this is a "hack". However, there are no other pure CSS/HTML alternatives.
button:hover is just when you move the cursor over the button.
Try button:active instead...will work for other elements as well
button:active{
color: red;
}
:focus.:activepseudo selector:activeis what you're searching for developer.mozilla.org/en-US/docs/Web/CSS/:active