Creating a Clickable Button in HTML

Introduction

The HTML <button> element is used to create a button on a webpage that can be used to perform certain actions. In this tutorial, we will learn how to create a button using HTML.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70717{{"`HTML Clickable Button`"}} html/charset -.-> lab-70717{{"`HTML Clickable Button`"}} html/lang_decl -.-> lab-70717{{"`HTML Clickable Button`"}} html/head_elems -.-> lab-70717{{"`HTML Clickable Button`"}} html/forms -.-> lab-70717{{"`HTML Clickable Button`"}} end

Create the HTML file

Create an HTML file called index.html. In this file, we will create a basic HTML structure.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body></body>
</html>

Create a button

To create a button, we use the HTML <button> element. We can add text, images, or multimedia content between the opening and closing tags of the button element.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body>
    <button>Click Me!</button>
  </body>
</html>

Add an onclick attribute

We can add an onclick attribute to the button element to execute a JavaScript function when the button is clicked.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body>
    <button onclick="alert('Hello World!')">Click Me!</button>
  </body>
</html>

Add CSS styling

We can use CSS to style the button as per our requirements. Here we add some basic CSS to change the text color, background color, and padding of the button.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
    <style>
      button {
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button onclick="alert('Hello World!')">Click Me!</button>
  </body>
</html>

Summary

In this tutorial, we learned how to create a button using HTML. We also learned how to add JavaScript function to the button element and apply CSS styling to the button. By mastering the button element, you can easily create buttons to perform actions on your webpage.

HTML Clickable Button