HTML form buttons let visitors submit data, navigate to pages, or trigger actions on your website. Here is how to create basic form buttons with HTML.
Common button types
Submit button:<button type="submit">Submit</button>
Link styled as button:<a href="https://yourdomain.com/page" style="display:inline-block; padding:10px 20px; background:#0066cc; color:#fff; text-decoration:none; border-radius:4px;">Click Here</a>
01. Button Types
- Submit button - Submits form data:
<button type="submit">Send</button> - Reset button - Clears form fields:
<button type="reset">Clear</button> - Link button - Navigates to a URL (use an
<a>tag styled as a button) - PayPal/payment button - Use PayPal's button generator at paypal.com to create payment buttons with the correct form action
02. Styling Buttons with CSS
<style>
.my-button {
display: inline-block;
padding: 12px 24px;
background-color: #0066cc;
color: #ffffff;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
text-decoration: none;
}
.my-button:hover {
background-color: #0052a3;
}
</style>
<a href="/contact" class="my-button">Contact Us</a>WordPress's block editor includes a built-in Buttons block. Go to the post editor, click the + icon, search for "Buttons," and add a button with no coding needed. You can customize colors, size, and link directly in the editor.
For contact form setup including form buttons, see Form Email Issues. For HTML editors, see HTML Editors.
Need Web Design Help?
Open a Support TicketQuick Recap
- Submit buttons use
<button type="submit"> - Link buttons use styled
<a>tags - Style with CSS for colors, padding, and hover effects
- WordPress has a Buttons block - No code needed
- PayPal buttons - Use PayPal's generator
Web development basics · Last updated March 2026 · Browse all General articles
