Adding button to product highlight

[cody123]

I'm looking to add a button to the featured product block on my homepage -- keptcollection.com.

I've already added a custom element where it says "Take a look inside  ->" but instead of this being text I'd like it to be a button instead. I do not want standard buy buttons here, I simply want the button to link to the product page. 

This is the customization I made previously to this area.
https://community.shopify.com/c/shopify-discussions/making-changes-to-quot-view-full-details-quot-te...

Is there a way to change or replace this text with a button that matches my store default button sytle

Thank you for your help!

[Code-Crafting]

Hi Cody123,
You can try the minimum level below. If you want more control or customization you can clone the Buy-Buttons snippets and make changes as you need.

Code:

<a
            {% if product == blank %}
              role="link" aria-disabled="true"
            {% else %}
              href="{{ product.url }}"
            {% endif %}
            class="link product__view-details animate-arrow"
          >
            <button class = "product-form__submit button button--full-width">
              {{ 'products.product.view_full_details' | t }}
            </button>
            {% render 'icon-arrow' %}
          </a>

Regards,
Development Team
Code Crafting AI

Our Apps: Stock Meter

[Guleria · Accepted solution]

Hello @cody123 ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code at the bottom:

 .link.product__view-details.animate-arrow {
    background-color: rgba(var(--color-button),var(--alpha-button-background));
    padding: 0.9rem;
    width: auto;
    text-align: center;
    color: #fff;
    border-radius: var(--buttons-radius);
    text-decoration: none;
}

Regards
Guleria