How can I create permanent, transparent buttons with black borders on Showcase theme?

Store Design
1

Hi!

I am trying to figure out how I can get transparent buttons with black borders (shape slidely rounded). In addition, currently the buttons will show up if you hover over it, however I want that you see them perminantly.

How can I change this?

My theme is Showcase.

Hope someone could help me!

2

@Juliettevdwerf - can you please share your website link where you have this button? It will need css

3

Hi Suyash1,

Thanks for your response.

Frents official ~ Customize Showcase ~ Shopify (frents-official.myshopify.com)

I have it with the “image with text overlay” and “Gallery”.

Best regards

Juliette

4

@Juliettevdwerf - its asking to login, can you send site link only?

5

Frents official

password: FRENTS

6

@Juliettevdwerf - please add this css to the very end of your styles.css file and check

.section-gallery .cc-gallery .overlay__content.has-button .line-3 {
    opacity: 1;    border: 1px solid #000;    border-radius: 30px;
}
7

Hi Suyash,

Thanks! I worked partly. The buttons are correct in the gallery sections, however in the “image with text overlay” still doesnt show a button with a border.

8

Hi Suyash,

One more thing, If I swift to mobile presence, the buttons are very spread out. This is not consistent with the other buttons.

9

Hi @Juliettevdwerf ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.css->paste below code at the bottom of the file:
.section-gallery .cc-gallery .overlay__content.has-button .line-3 {
    display: inline-block !important;
}

.collection-block.hover-info .caption.upper .button {
    opacity: 1;
    border: 1px solid #000;
    border-radius: 5px;
    display: inline-block;
    bottom: -10px !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

10

Thanks! I have for all the galleries the buttons are okay now.

Still for the image with text overlay, the buttons doesnt show a border.

Do you know the coding for this too?

11

Hi @Juliettevdwerf ,

You can try below code in styles.css file:

.overlay-type .button:not(.overlay-type-ignore) {
    border: 1px solid #000 !important;
}

Thanks you

12

Great! thanks it worked!