Buttons are an essential component of any website or online application because they enable visitors to interact with the page and execute a variety of tasks. The button> element in HTML may be used to construct buttons. In this tutorial, we’ll go over the fundamentals of constructing HTML buttons and look at several methods to personalize and decorate them.
The button element with a label is the simplest basic way to construct a button in HTML. For example, the code below generates a button that reads “Click Me!”
<button>Click Me!</button>This button will appear in the browser as a conventional button, and when clicked, it will do the default action, which is generally to submit a form.
To change the label of the button, use the value property or put text content within the button element. As an example:
<button value="Submit">Submit</button><button>Submit</button>You can also use the type attribute to specify the type of button. The type attribute can have the following values:
submit: submits the formreset: resets the formbutton: performs a JavaScript action when clicked
For example:
<button type="submit">Submit</button><button type="reset">Reset</button><button type="button" onclick="alert('Hello, World!')">Say Hello</button>In the last example, the button is of type ‘button’, and when clicked, it will launch a JavaScript code that displays an alert message “Hello, World!”. You may also use CSS to customize your buttons by utilizing the ‘id’ and ‘class’ properties. For example, you may use CSS to apply a custom button style to all buttons with that class by using the ‘class‘ property.
You may also use the ‘disabled’ property to prevent a button from being clicked. As an example:
<button disabled>Disabled</button>For more about Buttons in HTML we recommend you to watch this YouTube video.
