img 25 notes
May 6th / Thursday / '10
i’ve recently been playing with using CSS to create invisible interface elements that expose themselves on hover states- usually subtle stuff, like white lines that appear within a UL- but this is one of my favorite instances of using it so far. this gives an additional level of warning before actually getting to the link- when the text turns red, it’s a quiet alert. when you get to the actual button, the warning gets louder. i also utilized the page background color to ‘hide’ the button element until needed, so that the delete “link” draws less attention than the “button” (it’s assumed to not be frequently used) updated note: this interface is for a large data table, that is flexible and can get bigger. the tr:hover element helps users when trying to read data in a complex table, as it highlights the current row they’re viewing. in this type of instance, i stand behind the tr:hover. assuming there were only one or two of these links in a large table of data, do you think you would enjoy the multiple states? or would it get to be too much?

i’ve recently been playing with using CSS to create invisible interface elements that expose themselves on hover states- usually subtle stuff, like white lines that appear within a UL- but this is one of my favorite instances of using it so far.

this gives an additional level of warning before actually getting to the link- when the text turns red, it’s a quiet alert. when you get to the actual button, the warning gets louder.

i also utilized the page background color to ‘hide’ the button element until needed, so that the delete “link” draws less attention than the “button” (it’s assumed to not be frequently used)

updated note: this interface is for a large data table, that is flexible and can get bigger. the tr:hover element helps users when trying to read data in a complex table, as it highlights the current row they’re viewing. in this type of instance, i stand behind the tr:hover.

assuming there were only one or two of these links in a large table of data, do you think you would enjoy the multiple states? or would it get to be too much?

  1. omfgitsasalmon answered: I believe, unless there really is a reason for the box hover, like maybe, to tell people that they could type there, it’s kind of an overkill
  2. 3countylaugh answered: I think in a large table it would be downright helpful. With a certian number of them it would be irksome.
  3. decodering reblogged this from nikography
  4. deplorableword answered: the TD having a hover state makes me think that I can click the whole TD, but I can only click the A?
  5. jacob answered: Looks sweet. We tried something like this for the buttons on start.io at one point and it definitely gets distracting if there are too many.
  6. playitbackward answered: It looks cool! As long as they aren’t placed right next to each other, I would like them.
  7. thisdizzydance said: I, personally, dig it and don’t think it would be too much if there were just a few like this in a larger data table.
  8. bwalden reblogged this from nikography
  9. fetherston answered: This reminds me of a covered toggle switch. Google it. Same UI device. It’s worked in airplane cockpits for years :P
  10. thehumaniser answered: i think a big red button that says delete is enough. why introduce subtlety where none is needed? clean and explicit.
  11. nikography posted this