Design Converter
Education
Last updated on Jan 8, 2025
Last updated on Jan 8, 2025
Buttons are a fundamental part of web development, providing users with interactive elements to perform actions on a web page. Whether it's submitting a form, navigating to a new page, or triggering a JavaScript function, buttons are essential.
In this blog, we'll explore how to add buttons in HTML, style them using CSS, and make them functional with JavaScript.
To add a button in HTML, use the <button>
tag. This creates a clickable button that can be styled and programmed for various actions. Here's a basic example:
1<button>Click Me!</button>
This simple button can be enhanced with attributes and styles to make it more interactive and visually appealing. The HTML button is a versatile element that can be used in many contexts.
Option buttons, commonly known as radio buttons, allow users to select one option from a set. Use the <input>
element with the type
attribute set to "radio"
:
1<form> 2 <input type="radio" name="option" value="1"> Option 1<br> 3 <input type="radio" name="option" value="2"> Option 2<br> 4 <input type="radio" name="option" value="3"> Option 3 5</form>
Each radio button should have the same name
attribute to ensure only one can be selected at a time.
To add a button that allows users to upload a file, use the <input>
element with the type
attribute set to "file"
:
1<form> 2 <input type="file" name="upload"> 3 <button type="submit">Upload</button> 4</form>
This form allows users to select a file from their device and submit it. The form action
attribute can specify where the file should be sent.
To make an icon clickable, wrap it in an <a>
tag:
1<a href="https://example.com"> 2 <img src="icon.png" alt="Clickable Icon"> 3</a>
This approach turns the icon into a clickable link that navigates to the specified URL.
To put a button in HTML and style it with CSS, start with the <button>
tag and apply CSS styles:
1<button class="styled-button">Styled Button</button> 2 3<style> 4 .styled-button { 5 background-color: #4CAF50; 6 color: white; 7 padding: 15px 32px; 8 text-align: center; 9 text-decoration: none; 10 display: inline-block; 11 font-size: 16px; 12 margin: 4px 2px; 13 cursor: pointer; 14 border-radius: 8px; 15 } 16</style>
You can add a clickable button using the <button>
tag or <input>
with type="button"
:
1<button onclick="alert('Button clicked!')">Click Me!</button>
The onclick
attribute is used to define a JavaScript function executed when the button is clicked.
To create a button that acts like a link, use an <a>
tag styled to look like a button:
1<a href="https://example.com" class="button-link">Go to Example</a> 2 3<style> 4 .button-link { 5 background-color: #008CBA; 6 color: white; 7 padding: 10px 20px; 8 text-align: center; 9 text-decoration: none; 10 display: inline-block; 11 border-radius: 5px; 12 } 13</style>
Here are some common CSS properties for styling buttons:
1button { 2 background-color: #4CAF50; 3}
1button { 2 border-radius: 12px; 3}
1button { 2 box-shadow: 2px 2px 5px #888888; 3}
1a.button-link { 2 text-decoration: none; 3}
onclick
1<button onclick="alert('Button clicked!')">Click Me!</button>
1document.querySelector('button').addEventListener('click', function() { 2 alert('Button clicked!'); 3});
1<button aria-label="Submit Form">Submit</button>
1button:focus { 2 outline: 2px solid #0000FF; 3}
1let button = document.createElement('button'); 2button.innerHTML = 'Dynamic Button'; 3button.onclick = function() { 4 alert('Dynamic Button Clicked!'); 5}; 6document.body.appendChild(button);
Buttons are a vital part of web development, providing users with interactive elements to perform actions. By understanding how to add, style, and make buttons functional, you can create engaging and accessible web pages.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.