wordpress中的按钮样式设置有问题



我认为这会很容易,所以我确信我错过了一些简单的东西。我有一个按钮,我正试图在我的网站上样式。这是用来设置样式的css。

button.popmake-contact-us {
display: inline-block;
height: 50px;
line-height: 50px;
padding-right: 30px;
padding-left: 30px;
position: relative;
font-family: 'Special Elite', 'Inconsolata', 'Droid Sans', serif!important;
font-size: 20px;
background-color: rgb(247, 210, 104);
color: rgb(255,255,255);
text-decoration: none;
text-transform: uppercase;
border-color: #EDE5B1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";
zoom: 1;
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: -2px -2px 0px rgba(95, 91, 77, 0.13);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);}
.contact_popup_button {position: fixed;bottom: 0px;right: 0px;z-index: 9999;}

这是按钮的HTML。

<footer>
<!--copyright info-->
<p class="footer-copyright">© Copyright 2015 | Sporting Life Bar . All Rights Reserved. </p>   
<!--Form Submission Button-->
<div class="contact_popup_button" style="cursor: pointer;"><button class="popmake-contact-us" style="cursor: pointer;">Contact Us</button></div>

我可以在Chromes-Inspeciton工具中练习它的样式,但一旦我将它添加到子主题中的style.css文件中。。它返回到默认样式。我不明白它为什么这么做!

如果你想看一看的话,我已经在舞台上直播了有问题的网站。http://staging.sportinglifebar.com/

该按钮位于网站的右下角。祈祷有人能帮我指明正确的方向!

如果有帮助的话,我会使用wordpress插件"Popup Maker"来设计表单的样式并创建弹出窗口。您必须为按钮定义一个类才能激活弹出窗口。

您的选择器中有一个错误

.popmake-contact-us input[type="button"] { 
    font-family: helvetica; 
    color: #666666; 
    font-size: 12px; 
    border:3px solid; 
    border-color: #000;
}

将使用popmake-contact-us 的父类查找type=按钮的输入

所以你想要的是一个带有类的按钮

button.popmake-contact-us{ ..style..}

最新更新