How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript

Question

How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript

I am facing an issue with my buttons. I have one regular button and another flat button created using input elements. After every click, I want to disable the buttons for 5 seconds. The disable function is working properly for the normal button, but for the flat button, I need it to visually appear disabled by being dimmed or frozen and also disable hover effects.

function enable(id) {
    document.getElementById(id).disabled = false;
}

function disable(id) {
    alert(id+" is disabled for 5 seconds.")
    document.getElementById(id).disabled = true;
    setTimeout(function () {
        enable(id);
    }, 5000);

}

#buttonflat {
    border: 0;
    background: lightblue;
    box-shadow: none;
    border-radius: 0px;
    color: red;
}

#buttonflat:hover {
    background-color: blue;
    color: white;
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <h1>DISABLE FLAT BUTTON</h1>
    <br>
    <button id="button" onClick=disable(id)> GOL_101_019_010 </button>
    <br><br>    
    <input id="buttonflat" type="button" value="GOL_101_019_010" onClick="disable(id)" />
    <br><br>




</body>

</html>

javascript html css button

Answer 1

Answer №1

To adjust the brightness, you can utilize the filter property and create a disabled effect by tweaking the brightness level.

filter: brightness(80%);

function enable(id) {
  document.getElementById(id).disabled = false;
}

function disable(id) {
  alert(id + " is disabled for 5 seconds.")
  document.getElementById(id).disabled = true;
  setTimeout(function() {
    enable(id);
  }, 5000);

}

#buttonflat {
  border: 0;
  background: lightblue;
  box-shadow: none;
  border-radius: 0px;
  color: red;
}

#buttonflat:hover {
  background-color: blue;
  color: white;
}

#buttonflat:disabled {
  user-select: none;
  filter: brightness(80%);
}

<h1>DISABLE FLAT BUTTON</h1>
<br>
<button id="button" onClick=disable(id)> GOL_101_019_010 </button>
<br><br>
<input id="buttonflat" type="button" value="GOL_101_019_010" onClick="disable(id)" />
<br><br>

You can customize the background-color to lightblue and the text color to red to give the appearance of it being unhoverable.

You can also modify the cursor style using:

cursor: not-allowed;

function enable(id) {
  document.getElementById(id).disabled = false;
}

function disable(id) {
  alert(id + " is disabled for 5 seconds.")
  document.getElementById(id).disabled = true;
  setTimeout(function() {
    enable(id);
  }, 5000);

}

#buttonflat {
  border: 0;
  background: lightblue;
  box-shadow: none;
  border-radius: 0px;
  color: red;
}

#buttonflat:hover {
  background-color: blue;
  color: white;
}

#buttonflat:disabled {
  background-color: lightblue;
  color: red;
  user-select: none;
  filter: brightness(80%);
  cursor: not-allowed;
}

<h1>DISABLE FLAT BUTTON</h1>
<br>
<button id="button" onClick=disable(id)> GOL_101_019_010 </button>
<br><br>
<input id="buttonflat" type="button" value="GOL_101_019_010" onClick="disable(id)" />
<br><br>

Answer 2

To adjust the brightness, you can utilize the filter property and create a disabled effect by tweaking the brightness level.

filter: brightness(80%);

function enable(id) {
  document.getElementById(id).disabled = false;
}

function disable(id) {
  alert(id + " is disabled for 5 seconds.")
  document.getElementById(id).disabled = true;
  setTimeout(function() {
    enable(id);
  }, 5000);

}

#buttonflat {
  border: 0;
  background: lightblue;
  box-shadow: none;
  border-radius: 0px;
  color: red;
}

#buttonflat:hover {
  background-color: blue;
  color: white;
}

#buttonflat:disabled {
  user-select: none;
  filter: brightness(80%);
}

<h1>DISABLE FLAT BUTTON</h1>
<br>
<button id="button" onClick=disable(id)> GOL_101_019_010 </button>
<br><br>
<input id="buttonflat" type="button" value="GOL_101_019_010" onClick="disable(id)" />
<br><br>

You can customize the background-color to lightblue and the text color to red to give the appearance of it being unhoverable.

You can also modify the cursor style using:

cursor: not-allowed;

function enable(id) {
  document.getElementById(id).disabled = false;
}

function disable(id) {
  alert(id + " is disabled for 5 seconds.")
  document.getElementById(id).disabled = true;
  setTimeout(function() {
    enable(id);
  }, 5000);

}

#buttonflat {
  border: 0;
  background: lightblue;
  box-shadow: none;
  border-radius: 0px;
  color: red;
}

#buttonflat:hover {
  background-color: blue;
  color: white;
}

#buttonflat:disabled {
  background-color: lightblue;
  color: red;
  user-select: none;
  filter: brightness(80%);
  cursor: not-allowed;
}

<h1>DISABLE FLAT BUTTON</h1>
<br>
<button id="button" onClick=disable(id)> GOL_101_019_010 </button>
<br><br>
<input id="buttonflat" type="button" value="GOL_101_019_010" onClick="disable(id)" />
<br><br>

Answer 3

Answer №2

To simplify things, you can apply styling to the disabled attribute like this:

[disabled]{
  opacity:0.5;
}

This CSS snippet will set the opacity of any element with the disabled attribute to 0.5.

function enable(id) {
    document.getElementById(id).disabled = false;
}

function disable(id) {
    alert(id+" is disabled for 5 seconds.")
    document.getElementById(id).disabled = true;
    setTimeout(function () {
        enable(id);
    }, 5000);

}

#buttonflat {
    border: 0;
    background: lightblue;
    box-shadow: none;
    border-radius: 0px;
    color: red;
}

#buttonflat:hover {
    background-color: blue;
    color: white;
}

[disabled]{
  opacity:0.5;
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <h1>DISABLE FLAT BUTTON</h1>
    <br>
    <button id="button" onClick=disable(id)> GOL_101_019_010 </button>
    <br><br>
    <input id="buttonflat" type="button" value="GOL_101_019_010" onClick="disable(id)" />
    <br><br>
</body>

</html>

Answer 4

To simplify things, you can apply styling to the disabled attribute like this:

[disabled]{
  opacity:0.5;
}

This CSS snippet will set the opacity of any element with the disabled attribute to 0.5.

function enable(id) {
    document.getElementById(id).disabled = false;
}

function disable(id) {
    alert(id+" is disabled for 5 seconds.")
    document.getElementById(id).disabled = true;
    setTimeout(function () {
        enable(id);
    }, 5000);

}

#buttonflat {
    border: 0;
    background: lightblue;
    box-shadow: none;
    border-radius: 0px;
    color: red;
}

#buttonflat:hover {
    background-color: blue;
    color: white;
}

[disabled]{
  opacity:0.5;
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <h1>DISABLE FLAT BUTTON</h1>
    <br>
    <button id="button" onClick=disable(id)> GOL_101_019_010 </button>
    <br><br>
    <input id="buttonflat" type="button" value="GOL_101_019_010" onClick="disable(id)" />
    <br><br>
</body>

</html>

Answer 5

Answer №3

To implement the feature of disabling and enabling elements on a webpage, you can take advantage of CSS properties like opacity and pointerEvents. Below are sample functions that showcase how this can be achieved:

function enableElement(id) {
    document.getElementById(id).disabled = false;
    document.getElementById(id).style.pointerEvents = "auto"; 
    document.getElementById(id).style.opacity = "1";
}

function disableElement(id) {
    alert(id+" has been disabled for 5 seconds.");
    document.getElementById(id).style.pointerEvents = "none"; 
    document.getElementById(id).style.opacity = ".5";
    document.getElementById(id).disabled = true;
    
    setTimeout(function () {
        enableElement(id);
    }, 5000);
}

Answer 6

To implement the feature of disabling and enabling elements on a webpage, you can take advantage of CSS properties like opacity and pointerEvents. Below are sample functions that showcase how this can be achieved:

function enableElement(id) {
    document.getElementById(id).disabled = false;
    document.getElementById(id).style.pointerEvents = "auto"; 
    document.getElementById(id).style.opacity = "1";
}

function disableElement(id) {
    alert(id+" has been disabled for 5 seconds.");
    document.getElementById(id).style.pointerEvents = "none"; 
    document.getElementById(id).style.opacity = ".5";
    document.getElementById(id).disabled = true;
    
    setTimeout(function () {
        enableElement(id);
    }, 5000);
}

How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Guide to centering a Material UI Table on a webpage

How to deal with an empty $_FILES array when there is file data present in $_POST

The synergy between HTML and JavaScript: A beginner's guide to frontend coding

Angular is unable to iterate through a collection of ElementRef instances

Styling a modal popup using session storage in CSS

What are the steps to resolve issues with URL Encoding?

The error encountered is related to the MongooseServerSelectionError that occurs in

Show small information box when hovering over custom toggle button

Trouble with attaching a click event to a jQuery datepicker

Update the ngView content on the fly

utilizing geographical coordinates in a separate function

Why does trying to package a Windows app on OSX prompt a request for Wine installation?

Insert a horizontal line within the text

Creating a basic bar graph using d3.js with an array of input data

Every time Fetch() is called in Node.js, a fresh Express session is established

Could Knockout's value binding potentially lead to a script injection vulnerability?

Could implementing a click/keydown listener on each cell in a large React datagrid with thousands of cells impact performance?

Extract information from the table using $_POST

Ways to identify the visible elements on a webpage using JavaScript

Data update using AJAX and codeigniter was unsuccessful