Trouble Styling Button in wordpress

I’d think this would be easy, so I am sure I am missing something simple.
I have a button I am trying to style on my website.
Here is the css used to style it.

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

And this is the HTML for the button.

Read More
<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>

I can practice styling it within Chromes Inspeciton tools, but once I add it to the style.css file in the child theme..it goes back to the default style. I can’t figure out WHY it is doing this!

The website in question I’ve got live on the staging site if you want to take a look at that. http://staging.sportinglifebar.com/

The button is kept at the very bottom right of the website. Praying someone can help point me in the correct direction!

If it is helpful, I am using the wordpress plugin “Popup Maker” to style the form and create to pop up. You have to define a class for the button to activate the popup.

Related posts

1 comment

  1. You have a mistake in your selector

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

    will look an input with type= button with a parent class of popmake-contact-us

    So what you want is a button with a class

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

Comments are closed.