HTML Buttons

HTML CODES & EXAMPLES

HTML Buttons

Learn how to create HTML buttons for forms, links, downloads, login, registration, call-to-action sections and modern responsive website interfaces.

← HTML Forms Start Learning →

What is an HTML Button?

Learn the basics

HTML buttons are interactive elements that allow users to perform actions on a webpage. Buttons can submit forms, reset forms, open pages, download files, trigger JavaScript actions and perform many other tasks.

Common HTML button elements include <button> and <input type=”button”>.

Basic Button

Create your first HTML button

basic-button.html

<button>
  Click Me
</button>

Button Types

Different button purposes

button-types.html

<button type="button">
  Normal Button
</button>

<button type="submit">
  Submit
</button>

<button type="reset">
  Reset
</button>

Submit Button

Submit a form

submit-button.html

<form>

  <input
    type="text"
    name="name"
    placeholder="Enter your name"
  >

  <button type="submit">
    Submit Form
  </button>

</form>

Reset Button

Clear form fields

reset-button.html

<form>

  <input
    type="text"
    placeholder="Enter your name"
  >

  <input
    type="email"
    placeholder="Enter your email"
  >

  <button type="reset">
    Reset Form
  </button>

</form>

Button with Link

Use a link as a button

link-button.html

<a
  href="https://www.sncec.in/"
>
  Visit Website
</a>

Styled Link Button

Turn a link into a modern button

styled-link.html

<a
  href="https://www.sncec.in/"
  class="btn"
>
  Visit Website
</a>

<style>

.btn{
  display:inline-block;
  padding:12px 22px;
  background:#1769d5;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  font-weight:bold;
}

.btn:hover{
  background:#0d55b0;
}

</style>

Button with Icon

Add an icon to improve visual clarity

icon-button.html

<button>
  🔍 Search
</button>

<button>
  📥 Download
</button>

<button>
  ✉ Contact Us
</button>

Login Button

Website login example

<button
  type="submit"
  class="login-btn"
>
  🔐 Login
</button>

<style>

.login-btn{
  background:#1769d5;
  color:#fff;
  padding:12px 25px;
  border:0;
  border-radius:8px;
  font-weight:bold;
  cursor:pointer;
}

</style>

Register Button

Student registration example

<a
  href="/student-registration/"
  class="register-btn"
>
  🎓 Register Now
</a>

<style>

.register-btn{
  display:inline-block;
  padding:13px 25px;
  border-radius:8px;
  background:#0c8f63;
  color:#fff;
  text-decoration:none;
  font-weight:bold;
}

</style>

Call-to-Action Button

Encourage visitors to take action

cta-button.html

<a
  href="/courses/"
  class="cta-btn"
>
  Explore Courses →
</a>

<style>

.cta-btn{
  display:inline-block;
  padding:14px 28px;
  background:#1769d5;
  color:#fff;
  border-radius:10px;
  text-decoration:none;
  font-weight:bold;
  box-shadow:
    0 8px 20px
    rgba(23,105,213,.25);
}

.cta-btn:hover{
  transform:translateY(-2px);
}

</style>

Download Button

Allow users to download a file

download-button.html

<a
  href="/files/course-notes.pdf"
  download
  class="download-btn"
>
  📥 Download PDF
</a>

<style>

.download-btn{
  display:inline-block;
  padding:12px 22px;
  background:#1769d5;
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:bold;
}

</style>

Button Hover Effect

Add interaction with CSS

hover-button.html

<button class="hover-btn">
  Hover Me
</button>

<style>

.hover-btn{
  padding:13px 25px;
  border:0;
  border-radius:8px;
  background:#1769d5;
  color:#fff;
  cursor:pointer;
  transition:.3s;
}

.hover-btn:hover{
  transform:translateY(-4px);
  box-shadow:
    0 10px 20px
    rgba(0,0,0,.15);
}

</style>

Gradient Button

Modern CSS gradient effect

gradient-button.html

<button class="gradient-btn">
  Get Started →
</button>

<style>

.gradient-btn{
  padding:14px 28px;
  border:0;
  border-radius:10px;
  color:#fff;
  font-weight:bold;
  cursor:pointer;

  background:
    linear-gradient(
      135deg,
      #1769d5,
      #00a8e8
    );
}

</style>

Outline Button

Minimal button style

outline-button.html

<button class="outline-btn">
  Learn More
</button>

<style>

.outline-btn{
  padding:12px 25px;
  background:transparent;
  border:2px solid #1769d5;
  color:#1769d5;
  border-radius:8px;
  font-weight:bold;
  cursor:pointer;
}

.outline-btn:hover{
  background:#1769d5;
  color:#fff;
}

</style>

Rounded Button

Modern pill-style design

rounded-button.html

<button class="pill-btn">
  Enroll Now
</button>

<style>

.pill-btn{
  padding:12px 28px;
  border:0;
  border-radius:50px;
  background:#1769d5;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
}

</style>

Button Group

Place multiple buttons together

button-group.html

<div class="button-group">

  <a href="/courses/">
    Courses
  </a>

  <a href="/contact/">
    Contact
  </a>

  <a href="/student-registration/">
    Register
  </a>

</div>

<style>

.button-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.button-group a{
  padding:11px 18px;
  background:#1769d5;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  font-weight:bold;
}

</style>

Disabled Button

Prevent user interaction

disabled-button.html

<button disabled>
  Coming Soon
</button>

JavaScript Button

Perform an action when clicked

javascript-button.html

<button
  onclick="showMessage()"
>
  Click Me
</button>

<script>

function showMessage(){

  alert(
    "Welcome to Shree Narayan Computers & Education Center!"
  );

}

</script>

Animated Button

CSS animation example

animated-button.html

<button class="animated-btn">
  Start Learning →
</button>

<style>

.animated-btn{
  padding:14px 28px;
  border:0;
  border-radius:10px;
  background:#1769d5;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  transition:.3s;
}

.animated-btn:hover{
  transform:scale(1.05);
  box-shadow:
    0 10px 25px
    rgba(23,105,213,.3);
}

</style>

Premium Education CTA

Practical website example

premium-education-buttons.html

<div class="cta-actions">

  <a
    href="/courses/"
    class="primary-btn"
  >
    🎓 Explore Courses
  </a>

  <a
    href="/student-registration/"
    class="secondary-btn"
  >
    Register Now
  </a>

</div>


<style>

.cta-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{
  display:inline-block;
  padding:13px 24px;
  border-radius:9px;
  text-decoration:none;
  font-weight:bold;
  transition:.25s;
}

.primary-btn{
  background:#1769d5;
  color:#fff;
}

.secondary-btn{
  border:2px solid #1769d5;
  color:#1769d5;
}

.primary-btn:hover,
.secondary-btn:hover{
  transform:translateY(-3px);
}

</style>

HTML Button Quick Reference

Important attributes and properties

Creates a button

<button>Click</button>

type=”button”

Normal button

type=”button”

type=”submit”

Submits form

type=”submit”

type=”reset”

Resets form

type=”reset”

disabled

Disables button

disabled

onclick

Runs JavaScript

onclick=”…”

class

Applies CSS styling

class=”btn”

href

Links to another page

href=”/courses/”

Live HTML Button Runner

Preview a complete button interface

LIVE PREVIEW

Practice Task

Test your HTML and CSS skills

🎯 Create a Course CTA Section

Create a professional course section with different buttons.

Add an Explore Courses button.
Add a Enroll Now button.
Add a Student Login button.
Add a Download Prospectus button.
Use hover effects.
Make all buttons responsive.
Use icons where appropriate.

`;document.getElementById( "sncecButtonsPreview" ).srcdoc = code;}/* ========================================== AUTO RUN ========================================== */document.addEventListener( "DOMContentLoaded", function(){sncecButtonsRun();} );

SNCEC PORTAL