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;
    }

我的表单提交按钮不像我的链接html按钮那样显示

2 个答案: