How to create a transparent Shop Now button with border?

Store Design
1

Screen Shot 2021-04-20 at 12.20.10 pm.png
Screen Shot 2021-04-20 at 12.20.10 pm.png732×182 146 KB

Screen Shot 2021-04-20 at 12.20.31 pm.png
Screen Shot 2021-04-20 at 12.20.31 pm.png535×179 82.5 KB

kmkmkm

1 Like
2

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

1 Like
3

@helloglow

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

1 Like
4

Thank you!

I have emailed you the info.

1 Like
5

@helloglow please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-index #shopify-section-1524769873765 .slick-list .slick-track .hero__link >a{
            background: transparent !important;
            border: 1px solid #ffffff;
            color: #ffffff !important;
           }
2 Likes
6

hmmm its not working. Not sure what im doing wrong

7

@helloglow

Please add the following code at the bottom of your assets/theme.css file.

.template-index .slideshow__slide .hero__link a.btn {
    background-color: transparent !important;
    border: 2px solid white;
    color: #fff !important;
}

Hope this works.

Thanks!

8

Hello! I’m trying to do the same and it’s not working any more

9

helllo @recess-concept

can you please share your site URL and if any password then share password

10

@recess-concept

Can you please share your site URL and if any password then share password .

Thanks!

11

Hi thanks for your help. Nothing has worked yet.

Here is the URL: https://recess-concept.com

Password: dopeoy

12

Here is the URL: https://recess-concept.com

Password: dopeoy

thanks

13

@recess-concept

Please add the following code at the bottom of your assets/theme.css file.

.template-index .hero__inner a.btn {
    background-color: transparent !important;
    border: 2px solid white;
    color: #fff !important;
}

Thanks!

14

hello @recess-concept

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-index .hero__inner a.btn {
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    color: #fff !important;
}
1 Like
15

I am trying to do a transparent shop now button on a minimal theme and I am not familiar with coding. I believe I want it on my slideshow photo… How can I make this happen?

1 Like
16

@Bmartin92

Please share your store URL.

17

Hello,

the codes you have given aren’t working for me and I don’t have a theme.css file.

I am using Brooklyn theme and I have theme.scss.liquid Can you help me please?

Store name: https://babysium.myshopify.com/

pass: viacra

1 Like
18

@oxeon06

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.hero--adapt a.hero__cta, .hero__slide a.hero__cta{
    background: transparent !important;
    border: 2px solid #fff;
}

Hope this works.

Thanks!

2 Likes
19

It worked! Omg, thank you so much!

1 Like
20

For theme Debut, this code does not work

1 Like