Debut theme - Make buttons transparent in mobile view

mbhlg
Explorer
53 0 16

Hi, 

Please could someone help me change these buttons so they are transparent? I want to keep the thin outline but get rid of the greyed out background.

See screenshot for examples on X, magnifying glass and 'subscribe'.

IMG_1329FEDB8443-1.jpeg

Thanks!

Replies 12 (12)
Anthony_David_
Trailblazer
229 29 89

Share store url

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
mbhlg
Explorer
53 0 16

@Anthony_David_ 

I've dropped you a message

Natztech
Shopify Partner
2236 565 1373

hello @mbhlg 

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

Natztech
Shopify Partner
2236 565 1373

hello @mbhlg 

@media screen and (max-width: 789px){
.search-form__clear-action.predictive-search__clear-button--visible{
	    background: transparent;
}
.search-form__connected-submit{
	background: transparent;
}
.btn.newsletter__submit{
	background: transparent;
}
}
mbhlg
Explorer
53 0 16

@Natztech 

Thanks, I tried the code and it doesn't seem to have worked on all buttons, see screenshots below.

I would also like the button outline to be rounded if possible, not rectangle?

IMG_7430.PNG

IMG_7429.PNG

IMG_7428.PNG

Thank you!

Anthony_David_
Trailblazer
229 29 89

@mbhlg Use the below code

button {
    background: transparent !important;
    border-radius: 16PX;
    padding: 3px 10px;
}


Hope this works

thanks

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
Natztech
Shopify Partner
2236 565 1373

hello @mbhlg 

fo all button transparent all  add below code in the bottom of  theme.css file 

@media screen and (max-width: 789px){
button {
    background: transparent !important;
    
}
}

 

mbhlg
Explorer
53 0 16

@Natztech 

Great that seems to have helped with the other buttons except the one on the captcha when you subscribe to email updates... see below

IMG_7431.PNG

Also would it be possible to get rid of all the black rectangle outline from all buttons? (except the email address boxes)

Thanks!

Natztech
Shopify Partner
2236 565 1373

hello @mbhlg 

@media screen and (max-width: 789px){
button:not(.newsletter__submit , #Contact_1622218268cfe899e3 .btn ){
    border: transparent;
}
}