Custom CSS Plugin/Simple Pages not accepting custom code

[micdur]

Hi everyone, I am attempting to create a Home page for my site using the CSS Plugin, Simple Pages Plugin, and the default (Thanks, Roy) theme. I can’t tell if the problem that I am having is the fault of the plugins or user error.

I am trying to position the button over the top of the image-button-container. However, I am not able to center the button using transform: translateX(-50%). Each time I input this, the CSS plugin deletes that line. Any clue as to whether this is an issue with the plugin or the CSS itself?

Here’s the HTML w/ shortcode:

[anyfile id="header.png" img=true width="100%"]

[anyfile id="learn.png" img=true width="100%"]Learn More

[anyfile id="quote1.gif" img=true width="100%"]

[anyfile id="explore.png" img=true width="100%"] Browse Collection

Here’s the CSS:

.image-button-container {
position:relative;
display:block;
width:100%
}

.overlay-button {
position:absolute;
bottom:20px;
left:50%;
padding:16px 36px;
background-color:#000;
color:#f6efd7 !important;
text-decoration:none;
border-radius:999px;
font-weight:700;
font-size:20px;
translateX(-50%) [gets removed each time I input this]
}

[boregar]

Hi, what if you try replacing translateX(-50%) by translate(-50%) (without “X”)?

[micdur]

Unfortunately, the CSS plugin is still rejecting that styling. I guess this just might be an issue with the plugin itself?

[boregar]

In this case, it seems that the “translate” directive is not supported by the module’s filter, so you’ll have to add your custom CSS to the theme’s CSS file directly.