Debut theme - Make buttons transparent in mobile view

[mbhlg]

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’.

Thanks!

[Anthony_David_1]

Share store url

[mbhlg]

@Anthony_David_1

I’ve dropped you a message

[Kinjaldavra]

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]

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]

@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?

Thank you!

[Anthony_David_1]

@mbhlg Use the below code

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

Hope this works

thanks

[Kinjaldavra]

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]

@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

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

Thanks!

[Kinjaldavra]

hello @mbhlg

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

[mbhlg]

Thanks @Kinjaldavra

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

thanks

[mbhlg]

@Kinjaldavra

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

[Kinjaldavra]

hello @mbhlg

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