Pattern Libraries

Active/Disabled Buttons

A disabled attribute can be applied to a button to make the button unusable and unclickable and keeps the user from clicking on the button until a condition is met.

Example

HTML

<button class="button" type="button">Active Button</button> <br> <br><button class="disabledbutton" type="button" disabled>Disabled Button</button>

CSS

.button { background-color: #33cccc; color: black; text-align:center; height: 40px; width: 100px; border-radius: 2px; } .disabledbutton { opacity: 0.6; background-color: #33cccc; color: black; text-align:center; height: 40px; width: 100px; border-radius: 2px; }