Form/Button Issues - html

Question

I am working a web page for my wife and adding a PayPal checkout button, although not using their standard button. For some reason, this code works when I put it into a WordPress block, but not when I view the page in a browser? Tried multiple browsers.
.text-sizing {
font-size: 12px;
text-align: center;
padding: 0rem;
display: flex;
align-items: center;
}
.btn-wrapper {
text-align: center;
padding: 0.1rem;
display: flex;
align-items: center;
}
.btn {
display: inline-block;
text-decoration: none;
border-radius: 50px;
border: 0px solid #400779;
color:#400779;
background: white;
font-size: 7px;
cursor: pointer;
}
.btn:hover,
.btn:active {
display: inline-block;
text-decoration: none;
border-radius: 50px;
border: 0px solid #400779;
color:white;
background: #400779;
font-size: 7px;
cursor: pointer;
}
<div class="btn-wrapper">
<div class="btn-wrapper">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XXXXXXXXXXXXXx">
<input type="submit" class="btn" value="Preorder Signed Copy">
</form>
</div>
</div>

Answer 1

So apparently I was using the wrong CSS tags. It should be 'input [type=XXX]'
<style>
input { text-align: center;
padding: 0.1rem;
display: flex;
align-items: center;
}
.input-wrapper {
text-align: center;
padding: 0.1rem;
display: flex;
align-items: center;
}
input[type=submit], input[type=submit]:active, input[type=submit]:focus {
display: inline-block;
text-decoration: none;
border-radius: 50px;
border: 0px solid #400779;
color:#400779;
background: white;
font-size: 7px;
cursor: pointer;
}
input[type=submit]:hover {
display: inline-block;
text-decoration: none;
border-radius: 50px;
border: 0px solid #400779;
color:white;
background: #400779;
font-size: 7px;
cursor: pointer;
}
</style>