HTML/CSS Trouble with <Form>

[ThatBlockishWay]

<form title= "You could've just hit start...">
<p>
<sup><sup>
<span>
	<mark class= "blue"><sub><sub>[</sub></sub><sup><sup>]</sup></sup></mark>
		<input
			type= "button"
Text for option;	value= "Act 1"
			onclick= "window.location.href='Intro.html'"/>
	<mark class= "blue"><sup><sup>[</sup></sup><sub><sub>]</sub></sub></mark>
</span>
</sup></sup>
</p>
</form>

form {
	border-radius: 2vw;
}
p {
	position: relative;
	top: -5vw;
	font-family: "DejaVu Sans Mono", monospace;
	font-size: 3vw;
	text-shadow: 1px 1px rgba(75,75,75,.8);
	margin-left: 44%;
	margin-right: 44%;
	text-align: center;
	text-shadow:
		-1px -1px 15px #1a1a1a,
		1px -1px 15px #1a1a1a,
		-1px 1px 15px #1a1a1a,
		1px 1px 15px #1a1a1a,
		-1px -1px 0 black,
		1px -1px 0 black,
		-1px 1px 0 black,
		1px 1px 0 black,
		-1px -1px 25px black,
		-1px 1px 25px black,
		1px -1px 25px black,
		1px 1px 25px black;
	padding: .5vw;
	color: rgba(0,107,179,.7);
}

No matter how hard I try there's an ugly grey box around the text in the <form> input, I can't see to make the box go away.. Is there something I can't seem to read up on or si there a better way to go about this?

[0x21]

.reset-button {
	border: none;
	margin: 0;
	padding: 0;
	width: auto;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: normal;
	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	-webkit-appearance: none;
}

Now just add `class="reset-button"` to the input.

[ThatBlockishWay]

2 minutes ago, mshaugh said:

.reset-button {
	border: none;
	margin: 0;
	padding: 0;
	width: auto;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: normal;
	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	-webkit-appearance: none;
}

Now just add `class="reset-button"` to the input.

Eyyyyy, thanks. Was losing my mind trying to work around it