How to replace text in "Book Now" button imported from Tock

Site URL: https://www.pursuitofhoppiness.co/events/hoppy-hussle

Hi there,

I created my event registration in Tock and connected the "Book now" button to the event page in Squarespace. Ideally I want the button to say "Sign up now" instead of "Book now" because, for a one-time event, it is a little misleading. Is there a way to do this with the Custom CSS editor? 

So far I've been able to make the existing "Book now" text hidden. But I have not been able to replace that text content. I don't understand how to reference HTML through CSS too well, so this is where I need the help. So far I have this code that hides the current text ("Book now") but cannot add the "Sign up now" after hiding the current:

#siteWrapper #Tock_widget_container .sqs-button-element--primary .TockWidget-B2, #siteWrapper #Tock_widget_container .sqs-button-element--primary .MainLabelSpan {
  visibility: hidden;
}
#siteWrapper #Tock_widget_container .sqs-button-element--primary .TockWidget-B2, #siteWrapper #Tock_widget_container .sqs-button-element--primary .MainLabelSpan:after {
  content: "Sign up now";
}

Please help if you can. If it's not possible, confirmation on that would help as well. I am trying to have the site ready for registration by September 6th. Thanks in advance!

I figure it out if this can help anyone else! This is the code I used:

#siteWrapper #Tock_widget_container .sqs-button-element--primary .TockWidget-B2 {
  visibility: hidden;
}
#siteWrapper #Tock_widget_container .sqs-button-element--primary .TockWidget-B2:after {
  visibility: visible;
  position: absolute;
  top: 0.5;
  left: 2.8rem;
  content: "Sign up now";
}

I found the CSS style (#siteWrapper #Tock_widget_container .sqs-button-element--primary .TockWidget-B2) that references the HTML through using the Squarespace ID chrome plugin, copying the ID of the button, and then opening the html inspector of the page, ctrl+F and pasting the ID, clicking on the HTML element that contained the "Book now" text, and the copying the CSS style from the Style section below that correlated to the HTML code. 

Then, using the CSS code found in this link: https://www.geeksforgeeks.org/how-to-replace-text-with-css/ I replace the ".toBeReplaced" parameter with the CSS Style found in the previous paragraph. After playing with the alignment a little, everything worked!

I really hope this can help anyone else having the same issue!