Customize Button Style
Beautify the payment button to match your website's style and brand
Crossmint offers two different ways to integrate our buy button into your website:
Customization is slightly different depending on which one you're using, so choose the correct one.
Dark and Light Modes Included
The Crossmint button includes dark and light themes out-of-the-box. The dark mode is set by default, but you can change this with the theme prop. Accepted values are
dark
(default one) andlight
.
This prop works for both SDKs.
Customizing the React.js Crossmint button
You can add your custom styles to your CrossmintPayButton
component. It only takes a few css rules to make it happen.
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";
export default function Mint() {
return (
<div>
<CrossmintPayButton
clientId="_YOUR_CLIENT_ID"
className="xmint-btn"
/>
</div>
);
}
We can see here that we have a React functional component called Mint
where we are rendering the CrossmintPayButton
component. Notice that we have added a className
prop with the custom class name we will use to style our button.
Now lets leverage CSS specificity to overcome Crossmint's default classes. In our stylesheets, we could write:
button.xmint-btn {
background-color: blueviolet;
}
And the result would be:

Customize the button background
Changing the button text (reactjs)
button.xmint-btn span {
display: none;
}
button.xmint-btn:after {
content: "Custom Buy Text";
color: white;
}
This will result in a button with custom text:

Customize the button text
Important
Note that we are using
button.xmint-btn
. If you were to use only the custom class name (.xmint-btn
) that may not override the default styles in all cases.
Customizing the Vanilla JS Crossmint button
Let 's see an example of how to customize the Crossmint button when using our VanillaJS Client SDK:
<crossmint-pay-button
clientId="_YOUR_CLIENT_ID_"
mintConfig='{"type": "candy-machine"}'
class="xmint-btn"
/>
Unlike the React.js version of the SDK, use the ordinary class
attribute to add a custom class to the Crossmint button.
.xmint-btn::part(button) {
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
.xmint-btn::part(contentParagraph) {
color: white;
font-size: 1.25rem;
}
Notice how we're utilizing the CSS psuedo-element ::part
because our Vanilla JS Crossmint Button is a web component.
To customize the button use ::part(button)
and to customize the text use ::part(contentParagraph)
.
The result will look like the following:

Customize the button background and style
Changing the button text (vanilla js)
.xmint-btn::part(contentParagraph) {
display: none;
}
.xmint-btn::part(button):after {
content: "Custom Buy Text"
}
This will result in a button with custom text:

Customize the button text
Updated about 2 months ago