For me it is option A

I'd go for Option C, option A is second but its not clear I mean it doesn't sound like an action, its more like a state unless you add some blur effect

@InaniELHoussain

Each button will show separately, I just put them together so I could demonstrate both states in one image. I have updated the OP and put a notice about it.

Sorry, they are a little confusing. I prefer a toggle (https://proto.io/freebies/onoff/).

To me, the words and colour should reflect the current state.

(How do you insert an image into the forum?)

@Snapey just like a link with ! infront

![](http://url/to/img.jpg)

They are toggle-able, only one of them will be shown at any time. I just put them together in the images to show both states.

Sorry, by toggle, I mean like this;

@Snapey Yes, that's what I mean as well. But now I have done it without JS so reloads page, but more or less same effect.

Could not see how to get the link to the image on imgur... Thats a css3 only effect. No JS required.

... but of course to persist the state some ajax would be required, as you said, or the button could be part of a form.

I agree with the toggle. Isnt it deactivate instead of inactivate?

@SaeedPrez It’s still jarring from a UX point of view. If I see a red button with a label ‘Inactive’, I don’t know whether that represents the item’s current state, or the state if I were to click it.

Instead. Consider a “switch” where it’s apparent what the current state is, and what sliding it will do:

@Snapey you have to right-click the image and copy the image address not the page address.

I understand that is CSS but there must be some kind of JS (ajax call) or that animation does nothing.

@zachleigh yes, excuse my English.. deactivate is correct.

But I think we're getting off-track. What I wanted to know is the design of the buttons.. What state (color and text) do you represent on the button?

In my opinion, activate should e green and deactivate should be red. But it depends on what youre deactivating. If its not anything critical, I would just use a minor color for it. Or, because you can only deactivate something that is active in the first place, and vice versa, grey out the one that is irrelevant.

@Snapey sorry, now I get what you mean. @martinbean thanks for clarifying... a toggle switch (with or without JS) does make a lot more sense.

Just to say, I've recently had to re-do some code that showed similar-ish states to be more accessibility friendly. So I need to make sure there is clear text (or at least an indication of which side a toggle is on/off) to indicate the state and not relying on colour or just the position of a button/slider. You're maybe already doing that - but thought it was worth pointing out :-)

I was sat with a user who has very low vision and uses a b&w display to help - it was a bit of a revelation how un-clear my app became... :-/ This page has something like the on/off I ended up with :

https://ghinda.net/css-toggle-switch/

Thanks @ohffs those look very nice. I've bookmarked it for the future. In this project I need links (buttons) so I ended up redesigning what I had to this.

@SaeedPrez you have just won some nice karma from low-vision people :-)