Debut theme - Make buttons transparent in mobile view

mbhlg
Explorer
52 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!

0 Likes
Anthony_David_
Trailblazer
222 29 87

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
0 Likes
mbhlg
Explorer
52 0 16

@Anthony_David_ 

I've dropped you a message

0 Likes
Natztech
Shopify Partner
1890 492 1170

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.

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
0 Likes
Natztech
Shopify Partner
1890 492 1170

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;
}
}
Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
0 Likes
mbhlg
Explorer
52 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!

0 Likes
Anthony_David_
Trailblazer
222 29 87

@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
0 Likes
Natztech
Shopify Partner
1890 492 1170

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;
    
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
0 Likes
mbhlg
Explorer
52 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!

0 Likes
Natztech
Shopify Partner
1890 492 1170

hello @mbhlg 

@media screen and (max-width: 789px){
button:not(.newsletter__submit , #Contact_1622218268cfe899e3 .btn ){
    border: transparent;
}
}
Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
0 Likes