Button Styling Not Appearing on Live Page

Hi there,

I have been troubleshooting all possible instances of why my buttons are not reflecting the correct styling in the builder. Site is at: https://tracewater.wpengine.com/

I tested plugins, cleared cache, checked latest updates, there is no custom css in the customizer.

There is custom css however in the accordion element and solutions elements on the page.

See screenshots for reference.

Hello Alison,

Thanks for writing in!

You are using this custom css:

.button{
    position:absolute;
    top:275px;
    width:300px;
    left:100px;
    text-align:center;
    opacity:0;
    color:rgb(0,76,115);
    border:solid 3px;
    transition:opacity .35s ease;
}
.button a{
    width:100px;
    top:150px;
    padding:5px 48px;
    text-align:center;
    color:rgb(0,76,115);
    z-index:1;
}
.container:hover .button{
    opacity:1;
    position:absolute;
    top:275px;
}

The button is hidden by default because of its 0 opacity. As soon as you hover over the container, the button will display. The position is also applied to it. This is what I am seeing on my browser:

If you are referring to the background color of the button, please set and override the default button styling in Pro > Theme Options > Buttons.

Hope this helps.

Hi there,

Sorry RueNel, but those aren’t the buttons I’m talking about.

I just wanted to share the custom CSS to show what is on the site that I reviewed to troubleshoot.

If you look at the buttons in the Hero and under the third section, they are completely vanishing and showing up in rectangles.

The forum image uploader will not let me upload the screenshot.

Hi Alison,

The forum will not allow other file formats. Please only upload jpg or png image format.

Are you referring to the “Learn More About Trace” button? You will need to set a background color. At the moment, you only set the interaction and the base background is transparent.

Your setting should be like this:

If this is not helping, would you mind providing us the url of your site with login credentials so we can take a closer look at your page?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

Hi RueNel,

I have attached a secure note above with the login credentials.

The backgrounds are meant to be transparent and pill shape. The issue is they’re not showing up altogether and as rectangles on hover.

Hi Alison,

Thank you for the credentials, there is an invalid custom CSS on your Footer’s custom CSS area, I did go ahead and commented that out and that resolves the button issue.

Hope it helps,
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.