[英]My form submit buttons are not displaying like my a link html buttons
我在這里有一個頁面: 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);
}
嘗試這個:
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;
}
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.