Add button class to a link

Hello,

On my Press Page I have a gallery, and in that gallery, I am adding a link to download each image in the gallery with HTML code. However, I would like the style of the "Download" button to be like other buttons on the website. 

This is the code that I have, but it is not working. Any clues?

<a class="sqs-block-button" href="https://images.squarespace-cdn.com/content/643730a61107da2b66f542b0/f3fb72d1-8abe-435b-8073-fcad7b9de423/a-thousand-pines-video-still-17.jpg" target="_blank"><strong>Download Video Still</strong></a>

https://quillfish-nectarine-3wnc.squarespace.com/
Password: atp2023!

Thanks in advance.

This is the screenshot.

Perfect, thank you!!

Also, I am looking to apply the site's button style to an accordion title that "shows more" text on my homepage (the site has been published here http://athousandpinesfilm.com/)

I achieved the look of the button using the code below but when the accordion text is expanded, the button lands on the middle of the text.

What would be a better practice for applying the style of my site's button to an accordion title?

Thanks!

.sqs-block-accordion .accordion-item__title-wrapper {
    color: var(--primaryButtonTextColor);
    background-color: var(--primaryButtonBackgroundColor);
    border-color: var(--primaryButtonTextColor);
  margin: 32px 0 0 0;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  position: absolute;
}

Change your code to this

.sqs-block-accordion .accordion-item__title-wrapper {
    color: var(--primaryButtonTextColor);
    background-color: var(--primaryButtonBackgroundColor);
    border-color: var(--primaryButtonTextColor);
    margin: 32px 0 0 0;
    display: inline-block;
}
li.accordion-item {
    text-align: center;
}

This works!, thanks! Would it be possible to change the "READ MORE" to "READ LESS" after the text is expanded? Thanks @tuanphan, you are the best!

A

On 4/28/2023 at 12:37 AM, AnaimationDesign said:

This works!, thanks! Would it be possible to change the "READ MORE" to "READ LESS" after the text is expanded? Thanks @tuanphan, you are the best!

A

Add this CSS

[aria-expanded="true"] span.accordion-item__title {
    font-size: 0;
}
[aria-expanded="true"] span.accordion-item__title:before {
    content: "READ LESS";
    font-size: 30px;
}

Awesome! I appreciate you!