Alternative Look for Disabled Buttons

Recently I was told that the disabled buttons in our Universal Theme application were not... disabled enough.


And I have to agree in a way. If that button was the only button visible on the page, it could be seen as the application's default color scheme.

So we added some very simple CSS:, .a-Button[disabled],, .t-Button[disabled] {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==) repeat;
  color: #6a6a6a;

Here's what a disabled button looks now:


There's no way to confuse them anymore.


Enjoy these APEX CSS tricks? Let me know and I'll post more.

Head here to see them all.