How can I customize the WordPress plugin button appearance with CSS?
Start with the button settings in the plugin. Use CSS when the built-in button settings do not cover the style you need.
Use the plugin button settings first
In the plugin settings, open Button Look and Button Styling.
Use the Styling is option to choose whether the button style is defined by your theme or by the plugin.
When Styling is is set to Custom, use settings such as
Text Color,
Background Color,
text size, border, padding, and radius before adding custom CSS.
Add CSS to your WordPress site
Add button CSS in your theme, child theme, page builder custom CSS area, or WordPress custom CSS area.
Do not use the Custom CSS option for styling the button shown on your website. That option changes the page content used for the generated output.
For the Save as PDF button, target the button wrapper or the button itself:
.save-as-pdf-pdfcrowd-button-wrap {
margin-top: 1rem;
}
.save-as-pdf-pdfcrowd-button {
font-family: Georgia, serif !important;
text-transform: uppercase;
}
For the Save as Image plugin, use the same pattern with
.save-as-image-pdfcrowd-button-wrap and
.save-as-image-pdfcrowd-button.
Style only one button
If only one manually placed button should be styled differently, give it a Button ID:
[save_as_pdf_pdfcrowd button_id="invoice-download"]
Then target that button in your CSS:
#invoice-download {
background-color: #125c5a !important;
border-color: #125c5a !important;
}
If the CSS does not apply
Theme styles, page-builder styles, or the plugin's inline button styles can
override ordinary CSS rules. Use a more specific selector first. If that is not
enough, add !important to the individual CSS declarations that must win.
If you do not want plugin-generated inline button styles, set Styling is to
Defined by your theme and style the button from your site CSS.