Css form subscribe to news letter

Here is an example of a basic CSS code for a newsletter subscription form:

<form>
  <label for="email">Subscribe to our newsletter:</label>
  <input type="email" id="email" name="email" placeholder="Enter your email address">
  <button type="submit">Subscribe</button>
</form>

And here is an example of how you can style it using CSS:

form {
  max-width: 300px;
  margin: 40px auto;
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
  display: block;
  margin-bottom: 10px;
}

input[type="email"] {
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button[type="submit"] {
  width: 100%;
  height: 40px;
  background-color: #4CAF50;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #3e8e41;
}

form input[type="email"]:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form button[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

This code adds some basic styling to the form, including:

A white background with a subtle shadow
A centered layout
A label and input field for the email address
A submit button with a green background and white text
Some basic hover and focus effects

You can customize this code to fit your specific needs and branding. You can also add additional styles to make the form more visually appealing or to match your website's design.

Here is an example of how you can use this code in an HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>Newsletter Subscription Form</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form>
    <label for="email">Subscribe to our newsletter:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email address">
    <button type="submit">Subscribe</button>
  </form>
</body>
</html>

Make sure to replace style.css with the actual file name and path of your CSS file.

NewsBreakers

Css form subscribe to news letter