How can I remove button (shape) around Add-to Cart button?

Site URL: https://vlogon.uk/

Hi guys.

Unfortunately I am unable to share the page we need this change with you at the moment, because it hasn't been published yet, but we're basically want to have the "Add-to-cart" functionality in a text only button.
The reason for it is simple: we've got 2 buttons on the site "opt in" and "opt out" by functionality, and we want to highlight the first one by representing a button, and kind of using the other one as a small text. Photo attached of the actual scenario.

I realised that it's probably a code insert what we're after, and here's one of the actual one I need to modify as explained above:

<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-button-element--primary"
     role="button" tabindex="0" data-dynamic-strings="" data-collection-id="60c9ced8924a473dc965693b"
     data-item-id="62c70b35835d6f7315d892d2" data-product-type="3" data-use-custom-label="false"
     data-original-label="Add To Cart" id="yui_3_17_2_1_1657212177086_333">
    <div class="sqs-add-to-cart-button-inner">Pro VIP</div>
  </div>

Ok. I think I've found an easy fix for my problem this morning.
All I had to change in the code is the section "sqs-button-element- -primary"
The solution: remove the "-primary" bit from there. It works great.
Here you can see the code with the change:
 

<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-button-element-"
     role="button" tabindex="0" data-dynamic-strings="" data-collection-id="60c9ced8924a473dc965693b"
     data-item-id="62c70b35835d6f7315d892d2" data-product-type="3" data-use-custom-label="false"
     data-original-label="Add To Cart" id="yui_3_17_2_1_1657212177086_333">
    <div class="sqs-add-to-cart-button-inner">Pro VIP</div>
  </div>

My new problem with it however is I'm struggling to make the text into the middle of the block. Tried different versions, but unfortunately none of them works.
Any idea why?