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.
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{_x000D_
color: red;_x000D_
}
_x000D_
There are three states of button
button
button:hover
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{_x000D_
background-color:red;_x000D_
}
_x000D_
<button>Click Me</button>
_x000D_
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 {_x000D_
display: none;_x000D_
}_x000D_
span {_x000D_
padding: 20px;_x000D_
font-family: sans-serif;_x000D_
}_x000D_
input:checked + span {_x000D_
background: #444;_x000D_
color: #fff;_x000D_
}
_x000D_
<label for="input">_x000D_
<input id="input" type="radio" />_x000D_
<span>NO JS styling</span>_x000D_
</label>
_x000D_
Or, if you prefer, you can toggle the styling:
input {_x000D_
display: none;_x000D_
}_x000D_
span {_x000D_
padding: 20px;_x000D_
font-family: sans-serif;_x000D_
}_x000D_
input:checked + span {_x000D_
background: #444;_x000D_
color: #fff;_x000D_
}
_x000D_
<label for="input">_x000D_
<input id="input" type="checkbox" />_x000D_
<span>NO JS styling</span>_x000D_
</label>
_x000D_
Source: Stackoverflow.com