我的表單提交按鈕不會顯示像我一個鏈接HTML按鈕

Question

我有一個頁面在這裏： http://www.simplypsychics.com/psychicprofile.php?pin=4439

，並在底部我使用的按鈕。但是，我的網站有我在下面的方式使用標準按鈕樣式：

<a href="http://www.simplypsychics.com/readers.html" target="_parent" class="placementtext_button">View all our great psychics</a> 

適用於它的CSS是這樣的：

.placementtext_button { 
background-color: #9a3ba8; 
background-image:url(headerbuttons2.jpg); 
border-radius:5px; 
margin: 10px 10px 10px 10px; 
color:#5c5c5a; 
font-family:"Century Gothic", sans-serif !important; 
font-size:14px !important; 
padding:8px !important; 
vertical-align: top; 
line-height:33px; 
text-align:center; 
text-decoration:none; 
-webkit-text-size-adjust:none; 
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
} 
.placementtext_button:hover { 
background-color: #494949; 
background-image:url(headerbuttons2.jpg); 
border-radius:5px; 
margin: 10px 10px 10px 10px; 
color:#f8c7ff; 
font-family:"Century Gothic", sans-serif !important; 
font-size:14px !important; 
padding:8px !important; 
vertical-align: top; 
line-height:33px; 
text-align:center; 
text-decoration:none; 
-webkit-text-size-adjust:none; 
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
} 

，但我的PHP按鈕的外觀完全不同。看到這個圖片說明：

http://i61.tinypic.com/102jck1.jpg

，我試圖修改出現在相同的CSS，但它不工作。

有沒有人知道我要去哪裏錯了？

這是該按鈕的CSS：

form input[type="submit"] { 
background-color: #9a3ba8; 
border-radius: 5px; 
margin: 10px 10px 10px 10px; 
color: #5c5c5a; 
font-family: "Century Gothic", CenturyGothic, AppleGothic, 'Muli', sans-serif !important; 
font-size: 14px !important; 
padding: 8px !important; 
vertical-align: top; 
line-height: 33px; 
text-align: center; 
text-decoration: none !important; 
-webkit-text-size-adjust: none; 
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
} 

Answer 1

試試這個：

form input[type="submit"] { 
     background-color: #9a3ba8; 
     border-radius: 5px; 
     margin: 10px 10px 10px 10px; 
     font-family: "Century Gothic", CenturyGothic, AppleGothic, 'Muli', sans-serif !important; 
     font-size: 14px !important; 
     padding: 0px !important; 
     vertical-align: top; 
     line-height: 33px; 
     text-align: center; 
     text-decoration: none !important; 
     -webkit-text-size-adjust: none; 
     -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
     -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
     letter-spacing: -1px; 
     font-weight: bold; 
     color: #ffffff; 
     border: none; 
    } 

Answer 2

ssergei在正確的軌道上的。在這種情況下，密鑰是border: none;。

這也可以全部鞏固更多;沒有必要重複在懸停狀態期間不改變的樣式。而且，如果可能的話，最好將類似樣式的選擇器設計在一起（用逗號分隔），以使代碼更清晰，更小。

.placementtext_button, 
form input[type="submit"] { 
    background-color: #9a3ba8; 
    border-radius: 5px; 
    border: none; 
    margin: 10px 10px 10px 10px; 
    color: #ffffff; 
    font-family: "Century Gothic", CenturyGothic, AppleGothic, 'Muli', sans-serif !important; 
    font-size: 14px !important; 
    padding: 8px !important; 
    vertical-align: top; 
    line-height: 33px; 
    text-align: center; 
    text-decoration: none !important; 
    -webkit-text-size-adjust: none; 
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
    -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18); 
    } 

.placementtext_button:hover, 
form input[type="submit"]:hover { 
    background-color: #494949; 
    color:#f8c7ff; 
    }