Why isn't my CSS button styling displaying correctly on my returns policy page?

[ccet3322]

I am currently writing a new Returns policy using Shopify’s “Policies” section. I’ve added a button at the bottom of the page which the user can click to visit a form page to begin a Returns Form. I’ve intended to style this button similar to buttons we have on other pages (not policy pages).

I’ve inserted the css styling at the beginning of the HTML text and in the RTE/HTML display I see the correct styling on the button

However, when I visit the actual page, the styling is gone and all of the style parameters appear on the page as plain text

https://dev-mytilemart.myshopify.com/policies/refund-policy

Since the dev site may or may not be password protected I’ve also included a screenshot of what I see when I visit the policy page

I’ve dealt with some issues in the past with the RTE fields not being able to render all HTML correctly but I cannot figure out what’s going on here. I’ll post the source code below:

<style><!--
.button {
    background-color: #7DB0C0; /* blue */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    border-radius: 8px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
  .button:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
--></style>
<div>
<h5>Refunds on Returns:</h5>
<p>Refunds for returns will be processed once material is received back to our warehouse, inspected, and confirmed in acceptable return condition. This process can take between 24-72 hours after delivery to our location. Once your refund is approved, you will receive an email confirming your refund amount and the credit will be applied to the original form of payment in 7-14 days.</p>
<h5>Refunds on Broken Material:</h5>
<p>If you received broken material, please fill out a claim form. A representative will assist you with your order.</p>
<p> </p>
<h1 style="text-align: center;">Return Policy</h1>
<p>365 day returns. 25% restocking fee on all returns. Return must be unopened and in the same condition it arrived. Customer is responsible for all return freight and responsible for scheduling their own carrier. Please ensure returns are well packaged, any material returned damaged will not be refunded. If you would like to make a return, fill out an RMA request form. No return will be accepted without an approved RMA.</p>
<p> </p>
<p style="text-align: center;"> </p>
<div style="text-align: center">
  <button type="button" class="button" onclick="redirectToURL()"><a href="https://dev-mytilemart.myshopify.com/pages/rma-form">Start Return Form</a></button>
</div>
</div>

Any help would be greatly appreciated as I will want to use this type of effect on other policy pages. Thanks

[NomtechSolution]

1. Inline Styles: Instead of using a block, you can apply the button styles directly using inline styles within the button element. Here’s an example:

  

​

By including the button styles directly in the style attribute of the button element and using inline styles for the anchor () tag, the styling should be applied correctly.

[ccet3322]

Thank you for the reply. I did try in-line styling.

Once again in the RTE preview when I un-select the HTML button, the layout appears correct and the button is showing with the correct styling.

Unfortunately, when I view the actual page, there is no button, only the text from the button, but not the actual element.

Is it possible my theme is over-riding something? I can’t even get a basic button to display.

Even when I use Something only the word “Something” displays, but no button.

[ccet3322]

I’ve tried this again on 2 more stores that I am a developer on and am unable to display a button on any of them.

The last test was ran on a demo store which has a clean install of Dawn Theme, with no customizations, straight out of the box. The only content I added to the refund policy was:

This was the result:

So I guess I am re-phrasing my question…

Is it possible to add a button element to a Shopify Policies Page? Specifically the Refund Policy page, but I’ll accept a solution that works on ANY shopify policy page.

Thanks in advance