[Resolved] button focus color

[Matthew]

I have a white button to go a red color when it’s clicked, and when it’s clicked again it stays red. What I would like is for the button to return to the white color when it’s clicked again. Only this second button click would return the old color (and not a click onto the page etc.)

With this way the simple use of color implies an activated or non activated condition and there’s no need for a toggle text.

thanks,

[David]

Hi there,

Changing the ‘status’ of a buttons active state would require some JS – wherease a Check Box made to look like a button would not.

Can we see the a link where the button is displayed so we can look at the options ?

[Matthew]

Thanks David, I sent the link thru the account issue form along with an access password for the ‘Hidemysite’ plug-in.

Kindly note the code for the button below, inside the template for media attachments:

<button class="button page-nav red">Image Numbers</button>

It is hidden by default and is revealed by clicking another button:

<button class="button page-nav red">Portrayal Gallery</button>

thanks,

[David]

So would it just be the Image Numbers button that you want the focus color for or also the Portrayal Button?

[Tom]

Try adding this CSS:

.button.page-nav.red:active, .button.page-nav.red:focus {
    background: #fff;
    color: #CC2229;
    border: 2px solid #CC2229;
    text-decoration: none;
}

Let us know 🙂

[Matthew]

I need the white button to become red when clicked. Then, when clicked a second time, it becomes white. Like a toggle but toggling the color and not text.

With the above code it stays white.

I think it might require some script and will have a look if can find something.

[Matthew]

sorted this out with a resource on the ‘net,

<button class="button gallery" id="select" onclick="colorchange('select'); portrayalControls()" style="background:rgb(204,34,41); margin: 10px 10px">Portrayal Gallery</button>
<div>
<button class="button gallery" id="select1" onclick="colorchange('select1')" style="background:rgb(204,34,41);">Image Numbers</button>
</div>
<script>
	function colorchange(id)
	{

	  var background = document.getElementById(id).style.backgroundColor;

	  if(background == "rgb(204, 34, 41)")
	  {
	  document.getElementById(id).style.backgroundColor = "rgb(0,0,0)";
	  }
	  if(background == "rgb(0, 0, 0)")
	  {
		document.getElementById(id).style.backgroundColor = "rgb(204,34,41)";
	  }

	}
</script>

Buttons turn black when clicked then back to red when clicked again.

portrayalControls() is another function to open a div which has the second button not yet clicked.

https://drive.google.com/file/d/1KoMra0yaIF2dlALItBRWgdLsGrMiRpf5/view?usp=sharing

Took hover, active, focus etc off as confusing with this arrangement.

[Tom]

Glad you got it sorted 🙂

[Author]

Posts