Pardot Form

by bridget_kilgallon

HTML

<form>

<label>Label</label>
<input type="text" placeholder="Text Input" />
<label>Label</label>
<textarea placeholder="Text Area">Textarea</textarea>
<button>
Button</button>
</form>

CSS

form {
  max-width: 400px;
  margin: 0 auto;
  padding: 1em 5% 5%;
  font-family: open sans;
  background-color: #fafafa;
  border: 1px solid #ccc;
  border-radius: 7px;
  font-size: 1em;
}

label,
input,
textarea,
button {
  display: block;
  border: none;
  outline: none;
}

label,
button {
    margin-top: 1.5em;
}

input,
textarea {
    margin-top: 1em;
}

input,
textarea {
  width: 95%;
  padding: .5em;
  border-radius: 3px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 1em;
  font-size: .9em;
}

input:active,
textarea:active,
input:focus,
textarea:focus,
input:hover,
textarea:hover {
  box-shadow: 0 0 5px #ccc;
}

button {
  transition: all .25s ease-in-out;
background: #f9763a; 
background: -moz-linear-gradient(left, #f9763a 0%, #db4c1f 100%); 
background: -webkit-linear-gradient(left, #f9763a 0%,#db4c1f 100%); 
background: linear-gradient(to right, #f9763a 0%,#db4c1f 100%); 

padding: .8em 1.8em;
color: #fafafa;
font-weight: bold;
text-transform: uppercase;
font-weight: 600;
border-radius: 4px;
letter-spacing: .1em;
font-size: .85em;
border: 2px solid #f9763a;
}

button:hover {
  cursor: pointer;
  border: 2px solid #db4c1f;
  box-shadow: 4px 4px 4px #f9763a;
}