<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.