Border around buttons - Brooklyn Theme

Solved
Highlighted
Excursionist
13 0 7

Hello - I can't seem to figure out how to put a simple border around all my buttons (on all pages) in Brooklyn theme. I want a simple black border/outline (1 px?) around a white button so it pops off a white background. I have very little coding experience, but I've had good experience cutting and pasting code from message boards in the past.... Kind thanks in advance!

1 Like
Highlighted
Shopify Expert
872 72 205

This is an accepted solution.

Here's the approach I take to edit CSS on a site:

 

1) Use chrome dev tools inspector (on mac it's CMD + Shift + C) to find the ID / class of the element you want to change, in this case your button.

 

2) If you don't have a custom css file yet, create one by adding an asset custom.scss.liquid, then call it in your theme.liquid file after your theme's css file like this: {{ 'custom.scss.css' | asset_url | stylesheet_tag }}

 

3) Add the css to that file, example:

.button-class {
  border: 1px solid #000;
  background: #fff;
  color: #000;
}

 

 

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (first performance analysis tool specifically for Shopify sites).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
3 Likes
Highlighted
Excursionist
13 0 7

Done and done. Exactly what I wanted - thank you so much!


Jed

1 Like
Highlighted
New Member
1 0 0

Hi!

Do you know where to place this code when using MOTION - theme? 

 

0 Likes
Highlighted
New Member
1 0 0

Hi, do you know how I can do this, but for Presitge theme? My website is technicalfallbrand.com

 

0 Likes