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!

Highlighted
Shopify Expert
876 72 206

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!
Highlighted
Excursionist
13 0 7

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


Jed

Highlighted
New Member
1 0 0

Hi!

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

 

0 Likes
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