: "Toggled On" state for a button - Flat UI - Preferably HTML/CSS only What is a good way to style this edit button so it looks "Toggled On": I'm not really sure how to style the "toggled"

@Martha945

There are a lot of different possibilities to this and this is probably a bit opinion-based. You're also asking for a coding solution, so it might even be a better fit on Stack Overflow.

That being said, I would probably just change the color of the button, when it's active.

Inactive and active .

Here is my JSFiddle, so you can see the code: jsfiddle.net/ogj81hhh/17/
I do like the pressed-in idea as well. Maybe you could use a combination of changing the background color and making it seem pressed.

Example: jsfiddle.net/wxjzsfo1/3/
Edit Thanks to Vicki for the suggestion. You can also change the icon of the button, while it's active, like I did here: jsfiddle.net/8herhsfq/3/. Just have a look through the different Font Awesome icons, to find one you want to use and enter its class name where I have "fa-pencil" in my jQuery.

Vote Up Vote Down

@Lee3735518

It really depends how you want to do that.

One way it show the edit button when it's available or not.

Another way is to change the color when the button is available. A green color perhaps shows the toggle/on state of the button, whereas a gray button is unclickable and no action can be performed.

I am not an expert in code but check this: jsfiddle.net/e9qa675d/

Vote Up Vote Down