The <button> tag is the primary way to create clickable elements in HTML. Unlike links which take you somewhere, buttons usually perform an action: submit a form, open a menu, or toggle a setting.

Step 2: Video

Let's create a basic button. We open the tag with <button>. It is a non-void element, meaning it requires a closing tag. Whatever you type inside becomes the label of the button.

<button>

Step 3: Video

Now we add the text 'Click Me' and immediately close it with </button>. It is crucial to use meaningful text so users and screen readers know what the button does.

<button>Click Me</button>

Step 4: Video

This is how it renders. Browsers provide a default gray styling with borders and hover effects, making it look 'clickable' automatically.

<button>Click Me</button>

Step 5: Video

The most important attribute is 'type'. If the button is inside a form, type='submit' sends data. If it's just for JavaScript interaction, use type='button'.

<form>
  <button type="submit">Send Data</button>
</form>

Step 6: Exercise

Checkpoint: Which attribute prevents a button from submitting a form?

<button type="?">No Submit</button>

Step 7: Video

You can disable a button using the boolean attribute 'disabled'. This prevents the user from clicking it until a condition is met, like filling out a form.

<button type="button" disabled>
  Processing...
</button>

Step 8: Video

Notice the button is now grayed out and unclickable. The browser handles this visual change for you automatically.

<button type="button" disabled>
  Processing...
</button>

Step 9: Video

Buttons can contain more than just text. You can nest icons, strong tags, or images inside them. Just make sure it remains a clickable interactive element.

<button>
  <strong>Save</strong> now
</button>

Step 10: Exercise

Checkpoint: Identify the valid syntax for a button closing tag.

<button>Click Me ???

Step 11: Video

Excellent work! You've learned how to create buttons, define their type, and disable them. Buttons are the drivers of user interaction.

<button>Success!</button>

Step 12: Video

Remember, never use a <div> as a button when the <button> tag exists. It's better for accessibility and keyboard navigation. Now, let's practice!

button.html

1 / 12

🔘

Tutor:The <button> tag is the primary way to create clickable elements in HTML. Unlike links which take you somewhere, buttons usually perform an action: submit a form, open a menu, or toggle a setting.

⭐ 0 EXP

Interaction Mastery

Unlock nodes by learning button attributes.

Concept 1: The Tag

The <button> element is used for clickable actions. It must have a closing tag.

System Check

Is the button tag a void element?

Yes, it has no content.No, it needs a closing tag.Only when disabled.Yes, like <br>

Community Holo-Net

Button Designs

Created a cool button style? Share your CSS and HTML combinations.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

The Power of the Button Tag

Pascual Vila

Frontend Instructor.

The <button> element is the interactive core of web applications. While links navigate you to new pages, buttons trigger actions within the current context.

Types Matter

The most common mistake is forgetting the type attribute.

type="submit": The default behavior. Submits form data.
type="button": Does nothing by default. Used for JavaScript interaction.
type="reset": Clears all inputs in a form (use carefully!).

Accessibility

Native buttons come with built-in accessibility. They are focusable via keyboard (Tab key) and can be activated with Enter or Space. If you use a <div> instead, you break this functionality for screen reader users.

States

Buttons have states like :hover, :focus, and :disabled. The disabled attribute specifically removes the element from the tab order and prevents click events.

Button Glossary

type="submit": The default behavior for buttons inside a form. It gathers form data and sends it to the server URL defined in the form's action.
type="button": A button with no default behavior. It will not submit a form. It is purely for triggering JavaScript events.
disabled: A boolean attribute that makes the button non-interactive and unclickable, often displayed with a grayed-out visual style.
autofocus: An attribute that automatically gives focus to the button when the page loads.

📖 INDEX