Custom CSS issues in list block.. A simple button

Hi any help would be appreciated! I have an external checkout that opens as a popup for each of my list items. It is the blue “select gift” text in screenshot. The popup works fine but I am unable to style the button no matter what I try! Please help… don’t want to lose this function just because I can’t style a button…

I have added the code below as well for the popup. The href code is held in airtable as I need a different popup per list item. I am using the embed element to get it onto the list block.

Thanks for any help! Hoping to get it looking like a regular softr button.

Instructions I am using to add popup to my custom website

  • Add the Checkout Page script to the header of your site
  • Add the link code to your site
  • Optionally, style the link with CSS

Script code

Link code to open popup
Buy now

What is the link to the page where the list details is? This is this url we need to apply css to the button

Thanks for your reply :slight_smile:

I have tried adding code in the custom code box for this page with no effect

Can you try to add the following code in the custom code HEADER of the page?
All color are referenced with HEX color code to be more precise. I added the corresponding color next to the hex color code. Border radius is the roundness of the button border.
(This is for the select gift button)

Note that to customize the open drawer button that I see is explained in (this is where it comes from if I’m right?)

.cp-button {
  background-color: #00FF00; /* green */
  color: #FFFFFF; /* white */
  padding: 10px 20px;
  border-radius: 5px;
  border: 2px solid #000000; /* black, 2px, solid */
  cursor: pointer;
  font-size: 16px;

.cp-button:hover {
  background-color: #FFFFFF; /* white */
  color: #000000; /* black */

Can you show the code provided by to perform this “open modal”?
This could be launched by a softr button, adding javascript with a onclick event