Mastering Blue Submit Button Color and Reset Color in HTML and CSS

In web development, buttons play a crucial role in user - interface design. A well - designed submit button can significantly enhance the user experience, guiding users through the process of form submission. Among various button colors, blue is a popular choice due to its association with trust, professionalism, and stability. Additionally, reset buttons are used to restore form fields to their initial state. In this blog post, we will explore how to customize the color of blue submit buttons and reset buttons using HTML and CSS, covering fundamental concepts, usage methods, common practices, and best practices.

Table of Contents

  1. Fundamental Concepts
  2. Blue Submit Button Color in HTML and CSS
  3. Reset Button Color in HTML and CSS
  4. Common Practices and Best Practices
  5. Conclusion
  6. References

Fundamental Concepts

HTML Forms and Buttons

In HTML, forms are used to collect user input. The <form> element is used to create a form, and inside the form, we can use <input> elements of type submit and reset to create submit and reset buttons respectively.

  • Submit Button: A submit button is used to send the data entered in the form to the server. In HTML, it can be created using <input type="submit"> or <button type="submit">.
  • Reset Button: A reset button is used to clear all the data entered in the form fields and restore them to their default values. It can be created with <input type="reset"> or <button type="reset">.

CSS and Color Styling

CSS (Cascading Style Sheets) is used to style HTML elements, including buttons. Color can be specified in CSS using different color models such as named colors (e.g., blue), hexadecimal values (e.g., #0000FF), RGB values (e.g., rgb(0, 0, 255)), or HSL values (e.g., hsl(240, 100%, 50%)).

Blue Submit Button Color in HTML and CSS

Basic HTML Structure

First, let’s create a simple HTML form with a submit button:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF - 8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blue Submit Button</title>
</head>

<body>
  <form action="#">
    <input type="text" placeholder="Enter some text">
    <input type="submit" value="Submit">
  </form>
</body>

</html>

Styling the Submit Button with CSS

To make the submit button blue, we can use CSS. We’ll target the input[type="submit"] selector.

input[type="submit"] {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}

Combining the HTML and CSS:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF - 8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blue Submit Button</title>
  <style>
    input[type="submit"] {
      background-color: blue;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <form action="#">
    <input type="text" placeholder="Enter some text">
    <input type="submit" value="Submit">
  </form>
</body>

</html>

Advanced Styling

We can also add some hover and active states to the button to enhance the user experience:

input[type="submit"] {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background - color 0.3s ease;
}

input[type="submit"]:hover {
  background-color: darkblue;
}

input[type="submit"]:active {
  background-color: lightblue;
}

Reset Button Color in HTML and CSS

HTML Structure for Reset Button

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF - 8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reset Button Color</title>
</head>

<body>
  <form action="#">
    <input type="text" placeholder="Enter some text">
    <input type="reset" value="Reset">
  </form>
</body>

</html>

Styling the Reset Button

We can use CSS to style the reset button. Let’s give it a different color, for example, red.

input[type="reset"] {
  background-color: red;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}

input[type="reset"]:hover {
  background-color: darkred;
}

input[type="reset"]:active {
  background-color: lightcoral;
}

Combining the HTML and CSS:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF - 8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reset Button Color</title>
  <style>
    input[type="reset"] {
      background-color: red;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
    }

    input[type="reset"]:hover {
      background-color: darkred;
    }

    input[type="reset"]:active {
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <form action="#">
    <input type="text" placeholder="Enter some text">
    <input type="reset" value="Reset">
  </form>
</body>

</html>

Common Practices and Best Practices

Common Practices

  • Color Consistency: Use a consistent color scheme throughout the website. For example, if the brand color is blue, use a shade of blue for the submit button.
  • Accessibility: Ensure that the text color on the button provides sufficient contrast with the background color. Tools like the Web Content Accessibility Guidelines (WCAG) can help in checking contrast ratios.
  • Responsive Design: Make sure buttons are easily clickable on different devices. You can use relative units like percentages or em for sizing.

Best Practices

  • Use Semantic HTML: Use <button> elements instead of <input> elements when possible, as they are more flexible and semantically correct. For example:
<form action="#">
  <input type="text" placeholder="Enter some text">
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

button[type="submit"] {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}

button[type="reset"] {
  background-color: red;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}
  • Test on Multiple Browsers: Test the button styles on different browsers (Chrome, Firefox, Safari, Edge) to ensure consistent appearance.
  • Use Transitions: Add smooth transitions for hover and active states to make the button interactions feel more natural.

Conclusion

In this blog post, we’ve explored how to create and style blue submit buttons and reset buttons in HTML and CSS. We’ve covered the fundamental concepts, usage methods, and provided clear code examples. By following common and best practices, you can create buttons that not only look good but also provide a great user experience. Whether you are building a simple form or a complex web application, having well - designed buttons is essential for effective user interaction.

References