How to create Alert Button

17
0

To create an alert button in HTML, CSS, and JavaScript, you can follow these steps:

  1. In your HTML file, create a button element and give it an id attribute that you can use to select it in your JavaScript code.
<button id="alert-button">Click me!</button>
  1. In your CSS file, you can add styles to the button to customize its appearance.
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
  1. In your JavaScript file, you can use the addEventListener() function to listen for a click event on the button element, and display an alert message when the button is clicked.
const button = document.querySelector('#alert-button');
button.addEventListener('click', function() {
  alert('Button clicked!');
});

Here is the complete HTML, CSS, and JavaScript code that you can use to create an alert button:

<!DOCTYPE html>
<html>
<head>
  <style>
    button {
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      cursor: pointer;
      width: 100%;
    }
  </style>
</head>
<body>
  <button id="alert-button">Click me!</button>
  <script>
    const button = document.querySelector('#alert-button');
    button.addEventListener('click', function() {
      alert('Button clicked!');
    });
  </script>
</body>
</html>
Click me!

When you load this HTML file in a web browser, you should see a button that displays an alert message when you click it.

Leave a Reply

Your email address will not be published. Required fields are marked *