[英]My form submit buttons are not displaying like my a link html buttons
I have a page here: http://www.simplypsychics.com/psychicprofile.php?pin=4439 我在这里有一个页面: http : //www.simplypsychics.com/psychicprofile.php?pin=4439
and at the bottom I am using buttons. 在底部,我使用按钮。 But my site has a standard button style which I use in the following way:
但是我的网站具有标准的按钮样式,可通过以下方式使用:
<a href="http://www.simplypsychics.com/readers.html" target="_parent" class="placementtext_button">View all our great psychics</a>
The CSS applied to it is this: 适用于它的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);
}
but my PHP buttons look completely different. 但是我的PHP按钮看起来完全不同。 See this image to explain:
看到这张图片来解释:
http://i61.tinypic.com/102jck1.jpg http://i61.tinypic.com/102jck1.jpg
and I tried to modify the CSS to appear the same but it isn't working. 并且我试图将CSS修改为看起来一样,但无法正常工作。
Does anyone know where I am going wrong? 有人知道我要去哪里错吗?
This is the CSS for the button: 这是按钮的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);
}
Try this: 尝试这个:
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's on the right track. ssergei处在正确的轨道上。 The key, in this case, is
border: none;
在这种情况下,关键是
border: none;
. 。
This could also all be consolidated a lot more; 所有这些都可以进一步整合。 there's no need to repeat styles that aren't changing during a hover state.
无需重复在悬停状态下保持不变的样式。 And, if possible, it's best to style similarly styled selectors together (separated by commas) to keep your code cleaner and smaller.
并且,如果可能的话,最好将样式相似的选择器放在一起(以逗号分隔),以使代码更干净,更小。
.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.