<form>
  <input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$" title="Please enter a valid email.">
  <button>Submit</button>
</form>
body {
  display: flex;
  min-height: 100vh;
  background: #f1f1f1;
  font-family: 'Lato', sans-serif;
  font-size: 150%;
}

form {
  margin: auto;
}

input, button {
  padding: 15px 20px;
  border-radius: 1px;
  border: 2px solid #bdbdbd;
}

button {
  border-color: #616161;
  background: #616161;
  color: #f6f7f8;
  text-transform: uppercase;
  letter-spacing: 2px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.