Debut theme - Make buttons transparent in mobile view

mbhlg
Pathfinder
120 1 38

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_
Shopify Partner
417 46 105

Share store url

Theme customization | Design | Shopify App Consultant
Have Any Questions? Whatsapp +1 (341) 241-4263
Based in United States
mbhlg
Pathfinder
120 1 38

@Anthony_David_ 

I've dropped you a message 🙂

Kinjaldavra
Shopify Partner
2302 570 1422

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.

Kinjaldavra
Shopify Partner
2302 570 1422

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
Pathfinder
120 1 38

@Kinjaldavra 

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_
Shopify Partner
417 46 105

@mbhlg Use the below code

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


Hope this works

thanks

Theme customization | Design | Shopify App Consultant
Have Any Questions? Whatsapp +1 (341) 241-4263
Based in United States
Kinjaldavra
Shopify Partner
2302 570 1422

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
Pathfinder
120 1 38

@Kinjaldavra 

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!

Kinjaldavra
Shopify Partner
2302 570 1422

hello @mbhlg 

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

Thanks @Kinjaldavra 

Unfortunately still having issues with this as the email 'subscribe' buttons still have a black outline as below. 

IMG_CD42F135C060-1.jpeg

thanks

mbhlg
Pathfinder
120 1 38

@Kinjaldavra 

Sadly also the 'submit' button for the email captcha is still greyed out as below 

IMG_B3DDAD43A869-1.jpeg

Kinjaldavra
Shopify Partner
2302 570 1422

hello @mbhlg 

@media screen and (max-width: 789px){
.site-footer.critical-hidden .site-footer__hr{
	    visibility:hidden;
}
.shopify-challenge__button.btn{
	    background: transparent;
}
}