Add border to Shopify Buy button [Embedded code]

[EasilyMakeIt]

Hey everyone,

I'm having trouble customizing the Shopify Buy Button.
Indeed, I would like to add borders to the shopify "add to car"t button. Unfortunately I am currently a beginner in Javascript / CSS, Hence I face some  code limitations. By observing the attributes of the elements of the embedded code of the buy button I have seen the following properties;

- border-color

- border-width

However, when I apply these properties on the "Add to cart" button its doesn't generate borders.

Could someone please explain this customization process (Considering the number of unanswered questions about customization, I'm obviously not the only one asking this question )

Thank you 

Best regard

A.M

[StoreMedics]

Hey A.M

Happy to take a look. Likely just some minor CSS magic. Can you either kick over a link to your site or toss in the code you're using? 

[EasilyMakeIt]

Hello, thank you for your response,

Here is where I want to add a border:

  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      },
      "title": {
        "font-weight": "Arial, sans-serif",
        "color": "#dedede",
        "display": "none"
      },
      "button": {
        "font-size": "18px",
        "font-weight": "bold",
        "padding-top": "15px",
        "padding-bottom": "15px",
        "color": "#000000",
        "border-color": "#ffffff",
        "border-width": "4px",
        ":hover": {
          "color": "#e6e6e6",
          "background-color": "#404040"
        },

The part that is not working are the two lines: 

"border-color": "#ffffff",

"border-width": "4px",

Do you have any idea why ?

[oscprofessional · Accepted solution]

Hello,

Please add below code also

"border-style":" solid",

---

@EasilyMakeIt wrote:

Hello, thank you for your response,

Here is where I want to add a border:

  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      },
      "title": {
        "font-weight": "Arial, sans-serif",
        "color": "#dedede",
        "display": "none"
      },
      "button": {
        "font-size": "18px",
        "font-weight": "bold",
        "padding-top": "15px",
        "padding-bottom": "15px",
        "color": "#000000",
        "border-color": "#ffffff",
        "border-width": "4px",
        ":hover": {
          "color": "#e6e6e6",
          "background-color": "#404040"
        },

The part that is not working are the two lines: 

"border-color": "#ffffff",

"border-width": "4px",

Do you have any idea why ?

---

[EasilyMakeIt]

You are my all time favorite super hero!

This is perfectly working!

Thank you so much! I hope this will help other person in the future.

[oscprofessional]

Hello EasilyMakeIt,

You are always welcome..