0

What is a good way to style this edit button so it looks "Toggled On":

enter image description here

I'm not really sure how to style the "toggled" state so that it is clear, looks nice, and is congruent with the look I've created. Its a flat UI. The button sort of looks like translucent paper to me.

Preferably it would be something that can be done in HTML/CSS only.

Some ideas I had:

  • Pressed in like - make it look concave
  • Highlight - make it glow or make the color brighter
  • Something else?

Zoomed out a little so you can see it in contex: enter image description here

Zoomed out some more: enter image description here

Creates a JS Fiddle if anyone feels like messing with the CSS:

https://jsfiddle.net/0m1ra07a/

This is the UI in action if this is helpful:

https://dcdetail.com/prototype/html/main.html

Improve this question
3
  • Showing attempts that you've made would make this question a lot better
    – Zach Saucier
    Oct 2 '15 at 17:50
  • Hey Zach. I tried using an inner shadow and a an inner border. Both didn't look very good and didn't seem worth mentioning. I have very little graphic design/UX experience so I'm not familiar with the fundamental concepts of how to make a button look pressed, like its clicked in and sticking in that state.
    – Chris Dutrow
    Oct 2 '15 at 18:11
  • Following up on my previous comment - I especially don't have an idea of a "toggled on" style that is congruent with this flat look. I keep thinking something that looked depressed would be good, but there are other ways such as changing the icon in the button. The down facing chevrons rotate upwards when they are pressed to indicate "expanded" and "minimized" states: dcdetail.com/prototype/html/main.html
    – Chris Dutrow
    Oct 2 '15 at 18:21
3

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 inactive and active active.

Here is my JSFiddle, so you can see the code: https://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: https://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: https://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.

Improve this answer
6
  • I agree with the colorized active state. I would add that changing the iconography to white could help increase the contrast between the two states, and could help lend to that "activated!" feeling. Totally opinion-based though.
    – Vicki
    Oct 2 '15 at 17:50
  • This is definitely not a question for SO as it is design based
    – Zach Saucier
    Oct 2 '15 at 17:50
  • @vicki great suggestion about changing the icon. I'll update my answer and code now, to do that.
    – Manly
    Oct 2 '15 at 17:53
  • Thanks for your answer. Yeah as far as it being a coding question, I'm not asking for how to code this. I am asking for a look that can preferably be done within the possibilities of HTML/CSS as opposed to a bitmap image.
    – Chris Dutrow
    Oct 2 '15 at 17:58
  • Does green go with the color scheme here? Also, would green indicate to the user that the button is pressed?
    – Chris Dutrow
    Oct 2 '15 at 18:06
1

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: http://jsfiddle.net/e9qa675d/

Improve this answer
3
  • I think you may have forgotten something in your coding? It doesn't seem to work, for me.
    – Manly
    Oct 2 '15 at 17:48
  • Does green go with the color scheme? Does it indicate to the user that the button is pressed?
    – Chris Dutrow
    Oct 2 '15 at 18:07
  • 1
    @ChrisDutrow The important takeaway is that whatever the color is, it should be noticeably different between the two states. If it were me, I'd make a handful and try them out to see how they feel (your red color, green, white, a happy blue...). It's ultimately a matter of opinion.
    – Vicki
    Oct 2 '15 at 19:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.