mPDF Button Styling Issues

1. **Inline Styles:** Make sure to use inline styles as much as possible. mPDF has better support for inline styles than for styles defined in “ tags or external stylesheets.

2. **Simplify CSS:** Some properties like `border-radius` might not be rendered correctly. Try using a simple border without rounded corners. For example, you can remove the `border-radius` property.

3. **Use HTML Tables:** Sometimes, wrapping your content in a table can help with layout issues. You can use a table to create a button-like appearance.

4. **Check for Missing CSS:** Ensure that any CSS properties you're using are supported by mPDF. You can refer to the [mPDF CSS support documentation](https://mpdf.github.io/css-stylesheets/supported-css.html) for a list of supported styles.

Here’s a simplified version of your button styled with basic properties:

<a href="#" style="display: block; width: 240px; height: 48px; color: #fff; font-size: 20px; text-decoration: none; line-height: 48px; background-color: #1f75ff; text-align: center; font-weight: bold; border: 1px solid red; padding: 10px; box-sizing: border-box;">Credit Card</a>

Alternatively, you could use a table approach:

<table style="width: 240px; height: 48px; border-collapse: collapse;">
    <tr>
        <td style="background-color: #1f75ff; color: #fff; font-size: 20px; text-align: center; font-weight: bold; border: 1px solid red; height: 48px; line-height: 48px;">
            <a href="#" style="color: #fff; text-decoration: none;">Credit Card</a>
        </td>
    </tr>
</table>

Try these suggestions, and you should see better results when generating the PDF with mPDF.