Change the style of a button

Solved
GeorgeNebraska
New Member
17 0 0

Hi,

I am hoping someone can help. I would like to change the styling of some buttons created by an app. It is currently set as a white style but I would like it the same as the black style on the homepage. I would also like the remove the underline 'BUY MEMBERSHIP'.

Here is my site:

https://pilates-with-amelia.myshopify.com/

PW: whawtu

Thanks in advance.

 

Screen Shot 2020-09-03 at 3.38.48 pm.pngScreen Shot 2020-09-03 at 3.39.28 pm.png

0 Likes

This is an accepted solution.

Do this to fix it in 20 seconds, @GeorgeNebraska 

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

.memberships_button a{display:inline-block!important;position:relative!important;color:#000!important;background:#000!important;border:2px solid #fff!important;text-align:center!important;text-transform:uppercase!important;letter-spacing:.05em!important;font-family:"Avenir Next",sans-serif!important;font-weight:400!important;font-style:normal!important;box-shadow:none!important;line-height:1.5!important;border-radius:0!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;font-size:13px!important;padding:9px 12px!important;-moz-transform:perspective(1px) translateZ(0)!important;-o-transform:perspective(1px) translateZ(0)!important;-ms-transform:perspective(1px) translateZ(0)!important;-webkit-transform:perspective(1px) translateZ(0)!important;transform:perspective(1px) translateZ(0)!important;-webkit-transition-property:color!important;-webkit-transition-duration:.3s!important;-webkit-transition-timing-function:cubic-bezier(.46,.01,.32,1)!important;-webkit-transition-delay:0s!important;-moz-transition-property:color!important;-moz-transition-duration:.3s!important;-moz-transition-timing-function:cubic-bezier(.46,.01,.32,1)!important;-moz-transition-delay:0s!important;-o-transition-property:color!important;-o-transition-duration:.3s!important;-o-transition-timing-function:cubic-bezier(.46,.01,.32,1)!important;-o-transition-delay:0s!important;-ms-transition-property:color!important;-ms-transition-duration:.3s!important;-ms-transition-timing-function:cubic-bezier(.46,.01,.32,1)!important;-ms-transition-delay:0s!important;transition-property:color!important;transition-duration:.3s!important;transition-timing-function:cubic-bezier(.46,.01,.32,1)!important;transition-delay:0s!important}.btn::before,.memberships_button a::before{content:''!important;z-index:-1!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;-moz-transform:scaleX(1)!important;-o-transform:scaleX(1)!important;-ms-transform:scaleX(1)!important;-webkit-transform:scaleX(1)!important;transform:scaleX(1)!important;-webkit-transition-property:transform!important;-webkit-transition-duration:.3s!important;-webkit-transition-timing-function:ease-out!important;-webkit-transition-delay:0s!important;-moz-transition-property:transform!important;-moz-transition-duration:.3s!important;-moz-transition-timing-function:ease-out!important;-moz-transition-delay:0s!important;-o-transition-property:transform!important;-o-transition-duration:.3s!important;-o-transition-timing-function:ease-out!important;-o-transition-delay:0s!important;-ms-transition-property:transform!important;-ms-transition-duration:.3s!important;-ms-transition-timing-function:ease-out!important;-ms-transition-delay:0s!important;transition-property:transform!important;transition-duration:.3s!important;transition-timing-function:ease-out!important;transition-delay:0s!important;-webkit-transform-origin:50%!important;transform-origin:50%!important;background:#fff!important}.btn:hover,.memberships_button a:hover{color:#fff!important;border-color:#fff!important}.btn:hover::before,.memberships_button a:hover::before{-moz-transform:scaleX(0)!important;-o-transform:scaleX(0)!important;-ms-transform:scaleX(0)!important;-webkit-transform:scaleX(0)!important;transform:scaleX(0)!important}.btn:disabled,.memberships_button a:disabled{cursor:default!important;background:#fff!important;color:rgba(0,0,0,.5)!important}.btn:disabled::before,.memberships_button a:disabled::before{-moz-transform:scaleX(0)!important;-o-transform:scaleX(0)!important;-ms-transform:scaleX(0)!important;-webkit-transform:scaleX(0)!important;transform:scaleX(0)!important}.memberships_button a{color:#fff!important;background:#fff!important;border-color:#fff!important}.memberships_button a::before{background:#000!important}.memberships_button a:hover{color:#000!important;border-color:#fff!important}.memberships_button a:disabled{border:2px solid rgba(255,255,255,.5)!important;color:rgba(255,255,255,.5)!important;background:#000!important}.memberships_button a:disabled::before{content:none!important}.plyr.plyr--full-ui.plyr--video:fullscreen .plyr__video-wrapper .plyr.plyr--full-ui.plyr--video:fullscreen .plyr__poster{background-color:#fff!important}
.memberships_button a{text-decoration:unset !important}



Please let me know whether it works.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
GeorgeNebraska
New Member
17 0 0

Amazing. Much appreciated!

0 Likes

No worries, @GeorgeNebraska !

Next time feel free to contact me personally, I'll be happy to help.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes