Adding border around file download link?

[WoolShop]

Hello,

Hoping folks can help me with a simple coding problem. 

I have a link via the Sky Pilot app to downloadable files in the customer account page.

I would like to add a box around it to make it look like a button vs. a link. 

Here is the code: 

<p>
  <a href="{% unless routes.root_url == '/' %}{{ routes.root_url }}{% endunless %}/apps/downloads/orders/{{customer.id}}" class="btn button">
    My Downloadable Files
  </a>
</p>

 This is what it looks like now: 

Any thoughts? 

[Natasha-Saed · Accepted solution]

Hi, 

In the <p> add the following <p style="border: 1px solid red;"> Change the color to what you desire.

But it will be more helpful if you can share your store URL to be able to take a better look at the code inspect

[Anshul_arora]

Hello @WoolShop ,

As per my understanding you are looking to provide a border to your 'My Downloadable Files' link/text.

Please take a look at the below mentioned solution and the code in to display border with the link -:

1. Go to the Online Store- Themes - Edit Code.

2. Search file theme.liquid

3. Add the below mentioned code at the bottom of the file.

<style>

a.btn.button{
border: 3px solid blue;

}

</style>

4. Save it.

I hope the solution helps you.

Please let me know if you have any issue or need any assistance.

Thank you.