CSS樣式不適用於按鈕？

Question

我使用下面的CSS：

/* START HEADER SETTINGS */ 
.header { 
top: 0; 
right: 0; 
left: 0; 
bottom: 90%; 
position: fixed; 
padding: 20px; 
background-color: #404040; 
font-family: 'Lobster', cursive; 
font-size: 30px; 
} 

#fundme { 
padding-left: 2%; 
font-size: 40px; 
float: left; 
color: white; 
text-decoration: none; 
} 

.header_buttons { 
color: #fff; 
background: #00cc66; 
border-radius: 8px; 
text-align: center; 
margin: 5px; 
padding: 10px; 
} 

.hb-4, 
.hb-5 { 
background: #00cc66; 
float: right; 
} 

.logout { 
color: #fff; 
text-decoration: none; 
background: #00cc66; 
padding: 6px 6px 6px 10px; 
border-radius: 8px; 
display: inline-block; 
margin: 5px; 
float: right; 
font-size: 30px; 
} 
/* END HEADER SETTINGS */ 

與以下頁面：

頁1

<div class="header"><a id="fundme" href="https://fund.me">fund.me</a> 
    <form method="post" action=""> 
     <input type="button" name="profile" class="hb-4 header_buttons" value="Profile" /> 
     <input type="submit" name="logout" class="hb-5 header_buttons" value="Log Out" /> 
    </form> 
</div> 

<div class="container"> 
the application will be shown here 
<?php echo "<h4 class='alert'>" . $response . "</h4>"; ?> 
</div> 

</body> 

頁2

<div class="header"><a id="fundme" href="https://fund.me">fund.me</a> 
    <div class="hb-4 header_buttons"><a href="https://fund.me/signup.php">Sign Up</a></div> 
    <div class="hb-5 header_buttons"><a href="https://fund.me/login.php">Log In</a></div> 
</div> 

<div class="container"> 
    <form method="post" action=""> 
     <h1 class="credential_form">Sign Up</h1> 
     <input type="text" name="fullname" class="credential_form" id="fullname" placeholder="Full Name" /><br /><br /> 
     <input type="text" name="email" class="credential_form" id="email" placeholder="Email" /><br /><br /> 
     <input type="password" name="password" class="credential_form" id="password" placeholder="Password" /><br /><br /> 
     <input type="submit" name="submit" class="credential_submit" value="Submit" /><br /><br /> 
    </form> 
    <?php if(isset($response)) echo "<h4 class='alert'>" . $response . "</h4>"; ?> 
</div> 

</body> 

它的工作原理罰款第二頁，但t他在頭文件中的按鈕樣式在第一頁上被搞亂了。

他們都使用相同的類，唯一的區別是第一頁使用按鈕，而第二頁使用鏈接。但是，我不明白爲什麼這個樣式應該重要。

是否有按鈕的樣式不相同的原因？

Answer 1

您正在使用相同的類，但在不同的元素上。您有input[type=submit]，input[type=button]和div s與a標籤。

這些元素中的每個人都有不同的默認樣式，所以你需要調整你的CSS重置/覆蓋這些默認值