Custom Button Styles other than Primary Secondary Tertiary

Similar to this post 

 I have pages where I want to style buttons outside the standard 3 options of Primary, Secondary, and Tertiary. 

My site is: 
Website:   https://nonagon-blackbird-dbdy.squarespace.com/
           PW:   sscommunityhelp062723

Example is on  https://nonagon-blackbird-dbdy.squarespace.com/balloon-pop-hub-bundle-sale where I might want: 
a. different buttons within the page to be different from one another
b. buttons to not be restricted to Primary, Secondary, or Tertiary default designs. 

Example of Wordpress different looking buttons for the above page https://teachingideas4u.com/balloonpop-hub-bundle-sale

In addition to the css, it would be much appreciated if you can explain how I can locate this correctly in Chrome Inspector so I can easily identify future buttons in Squarespace myself and just adjust the css accordingly. 

Thank you. 

First, use this free tool to find button block id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Next, add some code like this to Design > Custom CSS to customize button

div#block-yui_3_17_2_1_1687881590000_41142 a {
    color: violet;
    background-color: #f1f;
}

div#block-yui_3_17_2_1_1687881590000_50912 a {
    color: #000;
    background-color: brown;
    border-color: red;
    border-width: 1px !important;
}