Need help trying to make the second button with text ‘LEARN MORE’ to be inverse of the first ‘BUY NOW’ Button. Meaning i want the background transparent but with a gradient border and the text being also gradient. I used custom code to make the buttons gradient but all changes affect all buttons when I need the second button to be different from the first. I believe I have to edit the way it is outlined in the outline style checkbox but i dont know how. Please see the attached screenshot of the website.
Topic summary
A user needed help styling a secondary “LEARN MORE” button in an image banner to have a transparent background with gradient border and text, while keeping the primary “BUY NOW” button with its existing gradient fill. The issue was that custom CSS changes were affecting all buttons simultaneously.
Solution provided:
- Add custom CSS code to the theme’s
base.cssfile - Target secondary buttons specifically using the
.button--secondaryclass - Apply transparent background, black border, and black text color with
!importantflags
Outcome:
- The solution successfully created the desired outline/inverse button style
- User initially thought the code only applied to the first button but later resolved this independently
- Discussion marked as resolved with working implementation
Hi @dandel
This is Victor from PageFly - Shopify Page Builder App
Please share with me the URL - and password if password protected.
Await for your response
Best regards,
Victor | PageFly
Hi Victor, please check this share link:
This is Victor from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
a.button.button–secondary {
background: transparent !important;
color: black !important;
border: 2px solid black !important;
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
Yeahhh. You are welcome @dandel 
Hi Victor, one last question, how can i apply this style to all secondary buttons and all image headers? It seems to only apply to the first one. Thanks!
1 Like
Never mind, figured it out. Thanks again Victor!
1 Like
Great. @dandel .I am glad to be able to help you.