Cover Image for HTML Button Disabled
71 views

HTML Button Disabled

To create a disabled button in HTML, you can use the disabled attribute. Here’s an example:

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Disabled Button Example</title>
  </head>
  <body>
    <button disabled>Click Me</button>
  </body>
</html>

In the above example, the <button> element has the disabled attribute set. This disables the button, making it unclickable and visually indicating that it is disabled. Users won’t be able to interact with the button until the disabled attribute is removed or changed.

You can also set the disabled attribute dynamically using JavaScript. Here’s an example that disables the button initially and enables it after a delay of 3 seconds:

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Disabled Button Example</title>
    <script>
      setTimeout(function() {
        document.getElementById('myButton').removeAttribute('disabled');
      }, 3000);
    </script>
  </head>
  <body>
    <button id="myButton" disabled>Click Me</button>
  </body>
</html>

In this example, the JavaScript code uses the setTimeout() function to remove the disabled attribute from the button element after a delay of 3 seconds. This allows the button to become clickable after the specified time.

Feel free to modify the button text, styling, or JavaScript logic to suit your needs.

YOU MAY ALSO LIKE...

The Tech Thunder

The Tech Thunder

The Tech Thunder


COMMENTS