How to Create an HTML Button

by

In this tutorial, we explain how to create an HTML button. We’ll start with a simple button, then show how to customize its color and text, and finally demonstrate how to perform various actions when the button is clicked.

What you will learn in this tutorial:

  • How to create a button in HTML.
  • How to customize it with styles.
  • How to add an action when the button is clicked.

1. Creating a Simple Button, create an HTML Button.

We’ll begin by creating a simple button to get familiar with the HTML structure.

To do this, we use the <button> tag. Inside this tag, we can set up the basic properties of the button.

Here’s the code:

<html>
<head>
 <title>Simple Button</title>
</head>
<body>
 <button>Click Me</button>
</body>
</html>

This button is created inside the <body> tag. It will simply display the text “Click Me” without any custom styles or actions. Here’s how it looks:

How to Create an HTML Button

Explanation:

  • The <button> tag creates a basic button.
  • The text between <button> and </button> is displayed on the button.

2. Customizing the Button with CSS

We can use CSS to make the button more visually appealing by adding styles. How create an HTML Button

To do this, we define a style block in the <head> section and apply it to all buttons using the button selector.

<!DOCTYPE html>
<html>
<head>
    <title>Customized Button</title>
    <style>
        button {
            background-color: #4CAF50; /* Green */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049; /* Darker green on hover */
        }
    </style>
</head>
<body>
    <button>Custom Button</button>
</body>
</html>

This style applies to all buttons on the page. Here’s how the customized button will look:

Botón Personalizado

Explanation:

  • background-color: Sets the button’s background color.
  • color: Changes the text color.
  • padding: Adds spacing inside the button.
  • border: Removes the default border.
  • border-radius: Rounds the button’s corners.
  • font-size: Adjusts the text size.
  • cursor: Changes the cursor to a pointer when hovering over the button.
  • :hover: Alters the button’s color when hovered.

3. Adding an Action to the Button, create an HTML Button.

You can use JavaScript to perform an action when the button is clicked.

To trigger an action, use the onclick attribute inside the <button> tag.


<!DOCTYPE html>

<html>
<head>
 <title>Button with Action</title>
</head>
<body>
 <button onclick="showMessage()">Click Me</button>

 <script>
 function showMessage() {
 alert("You pressed the button!");
 }
 </script>
</body>
</html>

Botón Personalizado

Explanation:

  • onclick: An HTML attribute that triggers a JavaScript function.
  • showMessage(): A JavaScript function that displays an alert box when the button is clicked.

4. Button with a More Complex Action

You can use JavaScript to perform more complex actions, such as dynamically changing the page’s content.

Code:

<!DOCTYPE html>
<html>
<head>
 <title>Advanced Button</title>
 <style>
 button {
 background-color: #4CAF50; /* Green */
 color: white;
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
 font-size: 16px;
 cursor: pointer;
 }

 button:hover {
 background-color: #45a049; /* Darker green on hover */
 }
 </style>
</head>
<body>
 <p id="message">This text will change when the button is clicked.</p>
 <button onclick="changeText()">Change Text</button>

 <script>
 function changeText() {
 document.getElementById("message").innerHTML = "The text has changed!";
 }
 </script>
</body>
</html>
Botón Avanzado

Este texto cambiará al presionar el botón.

Explanation:

  • document.getElementById("message"): Selects the element with the ID “message”.
  • .innerHTML: Changes the HTML content of the selected element.

Result: When you press the button, the text inside the paragraph will dynamically change to “The text has changed!”.

Conclusion

In this tutorial, you learned how to:

  1. Create a simple button in HTML.
  2. Customize the button using CSS.
  3. Add both basic and advanced actions to the button with JavaScript.

These foundational skills are very useful for building interactive web projects. Try experimenting with your own buttons and enhance them with your creativity!

For more tutorials about HTML and CSS, visit this link.

Some related topics you may find interesting:

Html como poner una imagen.
Estructura básica de una pagina web en HTML

Leave a Comment