Is there any option, or special selector to change the style for a pressed button, what I mean by that..when a user clicks a button I want to change the style for that button? Is there any option to do that like: :focus or only with javascript click/focus event?
I think you are looking for the :active pseudo-class...
#btn { border: solid 5px red; padding: 5px; }
#btn:hover { border-color: green; }
#btn:active { border-color: blue; }
<button id="btn" />
Note: if you are using both :hover and :active on a single element, the :hover definition must come first.
Related
I've around 50* buttons and I want to change the style only for not disabled button
button{
background-color: white;
}
You need to use :disabled selector.
button:disabled {
background: white;
}
I am new css and I am having hard time changing the color of the button when clicked. Normally, when a button is clicked, the button color becomes blue for a very short period of time. I want it instead to be yellow. How can I achieve that?
html
<button id="btn">Hi</button>
It's very easy. You can get this by :active and :focus states. Just try the below snippet. (You can change the colors as per your needs.)
button {
background: #0095ff;
border: none;
padding: 10px 20px;
color: #fff;
outline: none;
}
button:active, button:focus {
background: yellow;
color: #000;
}
<button>Click Me!</button>
As you are new to CSS, if you need then you can read this if you want to:*
https://developer.mozilla.org/en-US/docs/Web/CSS
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 5 years ago.
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{
}
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>
Hello<br><br>
<a class="button" href="#">Bye</a>
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.
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>
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>
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;
}
I'm trying to figure out if there's a way to allow for prevent the styling of the ":focus" pseudo-class from being applying when there is a ":focus:active" or click event without the use of jQuery/JS. As the ":active" state is dependent on the ":focus" state, I would presume that ":focus:not(:active)" work, but it does not. Is there any way to combine ":not" with ":focus" to prevent "focus:active" from triggering "focus"?
:not(:focus) is the closest you can get in CSS
You can juste use :focus-visible this selector only triggers on focus not on active.
Well... a:focus:not(:active) works.
A thing that is important and a bit of a gotya, is the order of rules.
Always place the active as last so it overrules the hover.
It might be you want it on a none focus element like div.
Then you would need to add a tabindex for the browser to be able to set focus on the div.
And a thing to notice is that you need to assign the rules to a class or a type. A simple :hover { will not work on the div.
<html>
<head>
<style>
* {
outline: none;
}
a {
text-decoration: none;
display: inline-block;
padding: 3px 8px;
}
div {
display: inline-block;
}
.magic:focus:not(:active) {
text-decoration: underline;
border: 1px solid black;
padding: 2px 7px;
}
.magic:hover {
text-decoration: underline;
color: green;
}
.magic:active {
text-decoration: line-through;
color: red;
}
</style>
</head>
<body>
<a tabindex="1" class="magic" href="#"> hello </a>
<div tabindex="2" class="magic" > world </div>
</body>
</html>
Something can not get focused until it is active. So :focus:not(:active) is impossible. It can never be triggered.
I have the following CSS classes:
button.current {
background-color: #000;
}
button:hover {
background: #0007d5;
}
How can I make it so the background color does not change for the second button? In other
words I want the current and the hover to one work if there's not an additional class of
"inactive" on the button.
<button class="current">Show the current background</button>
<button class="current inactive">Show the current background</button>
You can use the :not() pseudo-class:
button.current:not(.inactive) {
background-color: #000;
}
button:hover:not(.inactive) {
background: #0007d5;
}
jsFiddle Demo