For the disabled buttons you can use the :disabled
pseudo class. It works for all the elements that have a disabled
API (typically form elements).
For browsers/devices supporting CSS2 only, you can use the [disabled]
selector.
As with the image, don’t put an image in the button. Use CSS background-image
with background-position
and background-repeat
. That way, the image dragging will not occur.
Selection problem: here is a link to the specific question:
Example for the disabled selector:
button { border: 1px solid #0066cc; background-color: #0099cc; color: #ffffff; padding: 5px 10px; } button:hover { border: 1px solid #0099cc; background-color: #00aacc; color: #ffffff; padding: 5px 10px; } button:disabled, button[disabled]{ border: 1px solid #999999; background-color: #cccccc; color: #666666; } div { padding: 5px 10px; }
<div> <button> This is a working button </button> </div> <div> <button disabled> This is a disabled button </button> </div>For the disabled buttons you can use the :disabled pseudo class. It works for all the elements that have a disabled API (typically form elements). For browsers/devices supporting CSS2 only, you can use the [disabled] selector. As with the image, don't put an image in the button. Use CSS background-image with background-position and background-repeat. That way, the image dragging will not occur. Selection problem: here is a link to the specific question: How to disable text selection highlighting Example for the disabled selector: button { border: 1px solid #0066cc; background-color: #0099cc; color: #ffffff; padding: 5px 10px; } button:hover { border: 1px solid #0099cc; background-color: #00aacc; color: #ffffff; padding: 5px 10px; } button:disabled, button[disabled]{ border: 1px solid #999999; background-color: #cccccc; color: #666666; } div { padding: 5px 10px; } <div> <button> This is a working button </button> </div> <div> <button disabled> This is a disabled button </button> </div>