I have noticed that the button inside a form has a lot more padding around it compared to the one outside of the form. I am trying to adjust the within-form button so that it matches the padding of the without-form button.
HTML/PHP
<?php
if (!(isset($_SESSION["sessionID"]))){
echo "<button onClick='handleSignInClick()' id='sign_in_button' class='btn'>Sign In</button>";
}
else {
echo "<form action='handler_sign_out.php' method='post' class='remove_padding'><input type='submit' class='btn' value='Sign Out'></form>";
}
?>
CSS
.remove_padding{
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.btn {
border: none;
background-color: inherit;
font-size: 16px;
text-align: center;
color: #3C3C3C;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
text-decoration: none;
padding: 10px 10px 10px 10px;
}
.btn:hover {
background: #eee;
}