Style product pop-up link to look like a button

[winstonmaz]

Hi, 

I'm using the Cascade theme, which comes with a pop-up block in the product template. I will use this as a contact button that brings up a contact form. I would like the link to look like the "add to cart" button but use our secondary color scheme.

Here is the code for the product-block-popup.liquid:

<div
class="{{ block_base_classes }} my-3 group-first:mt-0"
data-disable-variance
{{ block.shopify_attributes }}
>
<a
class="text-theme-basic flex items-center group break-word"
href="#Popup-{{ section.id }}-{{ block.id }}"
@Click.prevent="$store.modals.open('#Popup-{{ section.id }}-{{ block.id }}')"
role="button"
>
{% render 'product-icon',
icon: block.settings.icon,
classes: 'text-xs mr-3 w-4 h-4 shrink-0 group-hover:fill-scheme-accent'
%}
<span class="theme-link group-hover:text-scheme-accent">
{{- block.settings.link_label | escape | strip -}}
</span>
</a>
</div>

[ThePrimeWeb]

Hey @winstonmaz,

Add the button secondary class to the link

The whole code should be

<div
class="{{ block_base_classes }} my-3 group-first:mt-0"
data-disable-variance
{{ block.shopify_attributes }}
>
<a
class="button button--secondary text-theme-basic flex items-center group break-word"
href="#Popup-{{ section.id }}-{{ block.id }}"
@Click.prevent="$store.modals.open('#Popup-{{ section.id }}-{{ block.id }}')"
role="button"
>
{% render 'product-icon',
icon: block.settings.icon,
classes: 'text-xs mr-3 w-4 h-4 shrink-0 group-hover:fill-scheme-accent'
%}
<span class="theme-link group-hover:text-scheme-accent">
{{- block.settings.link_label | escape | strip -}}
</span>
</a>
</div>