Css button clicked color

How to change button color on click in CSS?

To change the color of a button when the user clicks on it, you can use the CSS pseudo-classes. A pseudo-class is a special type of CSS selector which is used to style elements based on their current state, such as mouse hover, mouse click, focus, etc.

In CSS, there are tons of pseudo-classes available. Each pseudo-class is designed for a specific state of the element and triggers only when the element is in that state.

• :hover – Specifies the styles for an element when the user hovers over it.
• :active – Specifies the styles for an element when it is active(e.g. button is clicked)
• :focus – Specifies the styles for an element when it is in the focused state
• :disabled – Specifies the styles for an element when the button is disabled

Whenever you click a button, the :active pseudo-class gets activated for that specific moment. So, if you want to change the color of a button when it is clicked, you have to specify the new color inside the :active pseudo-class.

Let me show you this with an example.

Let’s say we have the following button in our HTML file. It has a crimson color background by default. We want to change its background color from crimson to green whenever someone clicks on it.

To change its color from crimson to green whenever it is clicked, use the button:active pseudo-class:

/*Button’s normal styles*/ button < border: none; background-color: crimson; padding: 8px 16px; border-radius: 4px; color: white; >/*Change background color to green on click*/ button:active

After running the above code, you will get the following output:

As you can see from the above output, the background color of the button is changing from crimson to green whenever you click on it.

Does the Order of Pseudo Classes Also Matter?

When you are working with pseudo-classes, it is to be noted that they must be written in a specific order, if not, you might get unexpected results.

For example, if you by mistake put the :active pseudo-class before the :hover pseudo-class, the styles written under the :active class will be overridden by the styles written under the :hover pseudo-class.

Let’s say we apply the following styles to a button in order to change the button color to green on click and put the :active before :hover

/*Button’s normal styles*/ button < border: none; background-color: crimson; padding: 8px 16px; border-radius: 4px; color: white; >/*Change button color on click*/ button:active < background-color: green; >/*Change button color on hover*/ button:hover

This will give you the following output:

As you can see from the above output, the background color of the button is not changing to green when we are clicking on it, it remains blue only.

Can you figure out why this is happening?

The answer is simple, the order of the :active and :hover is not correct. Therefore, the styles that are written under the :hover is overriding the styles written under the :active pseudo-class.

So, keep the :hover pseudo-class before the :active pseudo-class and things will start working as expected:

/*Button’s normal styles*/ button < border: none; background-color: crimson; padding: 8px 16px; border-radius: 4px; color: white; >/*Change button color on hover*/ button:hover < background-color: blue; >/*Change button color on click*/ button:active

Below is the expected output:

As you see, now, when we hover over the button, its color is changing to blue and when we click on it, its color is changing to green. This is exactly what we expected.

Conclusion

In this article, we learned how we can change the background color of a button when we click on it.

To change the color of a button whenever someone clicks on it, we can use the :active pseudo-class. The :active pseudo-class gets activated only for that moment when you click a button. As soon as you finish clicking, this pseudo-class is removed from the element(button).

Also, when applying the :active pseudo-class to an element, you must keep it after the :hover and :focus pseudo-classes. If this order is not maintained, you might get unexpected results.

Related posts:

Источник

change color when clicked in HTML?

How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS or do I have to use Javascript? Thanks in advance This is the HTML code of my buttons.

5 Answers 5

Pure CSS

1. Change your button to another element (like span )
2. Use a label and checkbox to control the toggle status
3. Use :checked CSS selector and + sibling selector

.H1toH5 input < display: none; >.H1toH5 .seatButton < padding: 5px; border: 1px solid #ccc; background: yellow; >.H1toH5 input:checked + .seatButton

This is what I would have done — the functionality asked for really seems like checkboxes (highlighting/selecting multiple items) not buttons that behave like checkboxes.

thanks..i already knew how to do this, i just didnt want to change all the buttons i’ll guess i have to as this way is much easier!

How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS

Try utilizing css :focus pseudo class , background-color

no just the one that is clicked, but i want to be able to click on many buttons not just one

var elems = document.getElementsByClassName("seatButton"); for (var i = 0; i < elems.length; i++) < elems[i].onclick = function() < var color = window.getComputedStyle(this, null) .getPropertyValue("background-color"); this.style.backgroundColor = color === "rgb(255, 255, 0)" ? "rgb(255, 165, 0)" : "rgb(255, 255, 0)"; >; >;

@Bane Is expected result for click on any single button changes all button elements background color ?

You can do this with css a ::before pseudo element and the html checkbox input tag

input.toggle-btn < visibility: hidden; >input.toggle-btn::before < content: attr(value); display: inline-block; padding: 5px; background: #fff; font-size: 14pt; color: #aaa; border-radius: 5px; border: 1px solid #aaa; visibility: visible; >input.toggle-btn:checked::before

This code will toggle a specific class when you click on it. If you click on the button again it will then return to it’s original state.

Or just use the CSS Pseudo selected as people have specified above. There are many ways to achieve what you want!

No. You need to add/remove a class with javascript. To make @tpie feel better about himself, here is the code for that. Using jQuery:

$('.seatButton').on('click', function()< $(this).toggleClass('is-active'); >); 

Sure. if you want to make it a checkbox instead. The question was to use a button tag. I am well aware of how to do it with a checkbox or radio button.

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post.

@tpie Umm. this EXACTLY answered the question. The question. «Can I do by using CSS or do I have to use Javascript?» My answer. «No. You need to add/remove a class with javascript.»

Sean, please review the OP: «How do I make a button change to another color when clicked and when clicked again it goes back to its original color?» Your answer does not actually explain anything, and as shown by other answers, there are other solutions. If you want to insist it is an answer, fine, but it is of no practical value. You should delete it before it gets down-voted.

Источник

How to change Button CSS Color on Click

I have the following buttons that change when hovering over them. How do I set a background color when selecting one of the buttons without losing selection when I click elsewhere on the screen? In the current way, clicking the button makes it the color you choose, but clicking another field of the screen returns to the original color.

button < padding: 15px; margin: 0px 3px 0px 0px; font-size: 20px; font-weight: 400; font-family: Arial, Helvetica, sans-serif; border: none; >button:hover < cursor: pointer; background: black; >.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3

you would need js to add an active class (as long as the page wasn’t submitted, then you would need to do it with your server side language). What does clicking on the button do?

3 Answers 3

There is no possibility of achieving this without the use of JavaScript without experiencing unexpected side-effects.

If the visited state doesn’t matter or is even desired, please have a look at @Blazemonger’s answer.

CSS pseudo-classes focus and active are defined by losing its state when clicking elsewhere on the page.

$("#scale-0").click(function() < $("#scale-0").addClass('button-clicked'); >); $("#scale-1").click(function() < $("#scale-1").addClass('button-clicked'); >); $("#scale-2").click(function() < $("#scale-2").addClass('button-clicked'); >); $("#scale-3").click(function() < $("#scale-3").addClass('button-clicked'); >);

button < padding: 15px; margin: 0px 3px 0px 0px; font-size: 20px; font-weight: 400; font-family:Arial, Helvetica, sans-serif; border:none; >button:hover < cursor: pointer; background: black; >.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3 < background-color: #FE0200; color: white; text-shadow: 1px 1px 3px #8e8e8e; >.button-clicked

If you don’t want to use javascript and your button click doesn’t post back, then I would change this so that it used radio buttons and labels instead (assuming only one can be selected at a time — if multiple can, then change the radio for a checkbox):

.scale < /* hide radio button */ position: fixed; left: 100%; top: 100%; >.button < display:inline-block; padding: 15px; margin: 0px 3px 0px 0px; font-size: 20px; font-weight: 400; font-family: Arial, Helvetica, sans-serif; border: none; cursor: pointer; >.button:hover < background: black; color: white; >.scale:checked + label < /* selected styled */ background-color: #FE0200; color: white; text-shadow: 1px 1px 3px #8e8e8e; >

I don’t think you can do this with buttons without using JavaScript to add a class or change the style.

However, you can do this with by adding a :visited style:

.button < padding: 15px 30px; margin: 0px 3px 0px 0px; font-size: 20px; font-weight: 400; font-family:Arial, Helvetica, sans-serif; border:none; text-decoration:none; >.button:hover,.button:active,.button:visited < cursor: pointer; background: black; >.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3

The downside is that they will remain black even if you leave the page and return (unless the user clears their browser history).

Here’s a second approach that uses invisible checkboxes instead of buttons. However, this also has a downside where the user can click the button again to undo the color change:

input[type=checkbox][id^=scale-] < display: none; >.button < padding: 15px 30px; margin: 0px 3px 0px 0px; font-size: 20px; font-weight: 400; font-family: Arial, Helvetica, sans-serif; border: none; >input[type=checkbox][id^=scale-]:checked + .button, .button:hover, .button:active, .button:visited < cursor: pointer; background: black; >.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3

Источник

How to Change Button Color on Click in CSS

Button is a clickable element used to perform a specific action. Using CSS, you can set different styles of buttons one of them is to change the color of a button on click. The color of a button can be set using the CSS “:active” pseudo-class.

This blog will teach you the procedure related to changing the button color on click. For this, firstly, learn about the :active pseudo-class.

What is “:active” in CSS?

Changing button color on click in CSS is possible with the help of the “:active” pseudo-class. In HTML, it indicates an element that is being activated when the user clicks on it. Moreover, when using a mouse, the activation starts when the mouse key is pressed.

“a” refers to the HTML element on which the :active class will be applied.

Let’s head towards an example to understand the stated concept.

How to Change Button Color on Click in CSS?

To change the color of a button on click, first, create a button in an HTML file and assign the class name “btn”.

HTML

Next, in CSS, set the color of the button. To do so, we will use “.btn” to access the button and set the color of the button as “rgb(0, 255, 213)”.

CSS

background-color : rgb ( 0 , 255 , 213 ) ;

After that, apply :active pseudo-class on the button as “.btn:active” and set the color of the button that will show in its active state as “rgb(123, 180, 17)”:

background-color : rgb ( 123 , 180 , 17 ) ;

This will show the following outcome:

Now, let’s add the heading with tag and button class name “button”, inside the tag.

HTML

Next, we will move to CSS and style the button and apply :active on it. To do so, we will set the border style as “none” and give padding as “15px”. After that, set the color of the button text as “rgb(50, 0, 54)” and its background as “rgb(177, 110, 149)”, and its radius as “15px”:

background-color : rgb ( 177 , 110 , 149 ) ;

This will show the following outcome:

After that, we will apply :active pseudo-class on the button as “.button:active” and set the color of a button as “rgb(200, 255, 0)”:

background-color : rgb ( 200 , 255 , 0 ) ;

Once you implement all of the above code, go to the HTML file and execute it to check out the result:

From the output, it can be observed when the button is clicked its color is changed according to the specified RGB color code.

Conclusion

To change the button color on click in CSS, the “:active” pseudo-class can be used. More specifically, it can represent the button element when it gets activated. Using this class, you can set different button colors when the mouse clicks on it. This article explained the procedure for changing button color on click in CSS.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник