Creating a Form Button

General | Updated 2026

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.

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 Users

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 Ticket

Quick Recap

  1. Submit buttons use <button type="submit">
  2. Link buttons use styled <a> tags
  3. Style with CSS for colors, padding, and hover effects
  4. WordPress has a Buttons block - No code needed
  5. PayPal buttons - Use PayPal's generator

Web development basics · Last updated March 2026 · Browse all General articles

  • 147 Users Found This Useful

Was this answer helpful?

Related Articles

My pages are updating/refreshing slowly

General | Updated 2026 If your website loads slowly or takes a long time to update after you...

How can I change the default page / document?

General | Updated 2026 The default page (also called the directory index) is the file that...

Error 401 Unauthorized

Errors & Troubleshooting | Updated March 2026 A 401 Unauthorized error means the server...

Error 404 - File Not Found

Errors & Troubleshooting | Updated March 2026 A 404 error means the server can't find the...

How do I cancel my account?

General | Updated 2026 If you need to cancel your hosting account with Ultra Web Hosting, you...



Save 30% on web hosting - Use coupon code Hosting30