I am attempting to design a form with two input fields and a button. Rather than using a plain text button, I prefer to utilize an SVG graphic for the button; however, it is not aligning correctly.
Consider the following HTML and CSS:
body {
background: #222;
margin: 25px;
}
form {
border: 1px solid #444;
padding: 2px;
}
input {
border: 1px solid transparent;
background: #444;
color: #ddd;
margin-left: 6px;
padding: 3px 5px;
}
input:focus {
outline: 0;
border: 1px solid #666;
}
button {
border: 0;
padding: 0;
background: transparent;
margin-left: 6px;
height: 23px;
width: 23px;
fill: #bbb;
}
button:focus {
outline: 0;
fill: #ddd;
}<form>
<input type="email" id="email" />
<input type="password" id="password" />
<button type="submit">
<svg viewBox="0 0 1024 1024">
<path d="M384 512h-320v-128h320v-128l192 192-192 192zM1024 0v832l-384 192v-192h-384v-256h64v192h320v-576l256-128h-576v256h-64v-320z" />
</svg>
</button>
</form>Upon running the snippet, the input fields are aligned at the bottom while the SVG-button is aligned at the top. When I substitute the SVG with text, the alignment issue is resolved.