Custom buttons

[Reactic]

So hey!

I have followed your setup on how to add custom buttons.
ie:https://theme.co/apex/forum/t/customizations-implementing-additional-button-colors/206

I also work with a child them, to ensure i dont ruin anything

So here´s the kicker.

When i add the code :

.x-btn.my-btnblue {
  color: #FFFFFF;
  border-color: #ac1100;
  background-color: #6baee7;
  -webkit-box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
          box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
}

.x-btn.my-btnblue:hover {
  color: #FFFFFF;
  border-color: #600900;
  background-color: #6baee7;
  -webkit-box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
          box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
}

Nothing changes, it is still red, what am i doing wrong?

Edit: solved it, but my Title text on the button does not show up at all, it´s like it´s transparent

i use the code : [button class=“my-btnblue” href=“www.test.com” title=“Läs mer”]
Can you help me out with this?

[Reactic]

Figured all this out, but one of my btn classes does not push i have to enter that css on that specific side/post for it to push it´s my orange buttons, can you please have a look at it to see if i missed something somewhere for it not to push ?

.x-btn.my-btng {
      color: #ffffff;
      border-color: #75a530;
      background-color: #8ec046;
      -webkit-box-shadow: 0 0.25em 0 0 #75a530, 0 4px 9px rgba(0, 0, 0, 0.75);
              box-shadow: 0 0.25em 0 0 #75a530, 0 4px 9px rgba(0, 0, 0, 0.75);
    }

    .x-btn.my-btng:hover {
      color: #ffffff;
      border-color: #4283ba;
      background-color: #8ec046;
      -webkit-box-shadow: 0 0.25em 0 0 #75a530, 0 4px 9px rgba(0, 0, 0, 0.75);
              box-shadow: 0 0.25em 0 0 #75a530, 0 4px 9px rgba(0, 0, 0, 0.75);
    }

.x-btn.my-btnblue {
      color: #ffffff;
      border-color: #4283ba;
      background-color: #6baee7;
      -webkit-box-shadow: 0 0.25em 0 0 #4283ba, 0 4px 9px rgba(0, 0, 0, 0.75);
              box-shadow: 0 0.25em 0 0 #4283ba, 0 4px 9px rgba(0, 0, 0, 0.75);
    }

    .x-btn.my-btnblue:hover {
      color: #ffffff;
      border-color: #4283ba;
      background-color: #6baee7;
      -webkit-box-shadow: 0 0.25em 0 0 #4283ba, 0 4px 9px rgba(0, 0, 0, 0.75);
              box-shadow: 0 0.25em 0 0 #4283ba, 0 4px 9px rgba(0, 0, 0, 0.75);
    }

   .x-btn.my-btnorange {
      color: #ffffff;
      border-color: #d8851e;
      background-color: #f49826;
      -webkit-box-shadow: 0 0.25em 0 0 #d8851e, 0 4px 9px rgba(0, 0, 0, 0.75);
              box-shadow: 0 0.25em 0 0 #d8851e, 0 4px 9px rgba(0, 0, 0, 0.75);
    }

    .x-btn.my-btnorange:hover {
      color: #ffffff;
      border-color: #d8851e;
      background-color: #f49826;
      -webkit-box-shadow: 0 0.25em 0 0 #d8851e, 0 4px 9px rgba(0, 0, 0, 0.75);
              box-shadow: 0 0.25em 0 0 #d8851e, 0 4px 9px rgba(0, 0, 0, 0.75);
    }

   .x-btn.my-btnlightgrey {
      color: #ffffff;
      border-color: #9a9999;
      background-color: #bfbfbf;
      -webkit-box-shadow: 0 0.25em 0 0 #9a9999, 0 4px 9px rgba(0, 0, 0, 0.75);
              box-shadow: 0 0.25em 0 0 #9a9999, 0 4px 9px rgba(0, 0, 0, 0.75);
    }

    .x-btn.my-btnlightgrey:hover {
      color: #ffffff;
      border-color: #9a9999;
      background-color: #bfbfbf;
      -webkit-box-shadow: 0 0.25em 0 0 #9a9999, 0 4px 9px rgba(0, 0, 0, 0.75);
              box-shadow: 0 0.25em 0 0 #9a9999, 0 4px 9px rgba(0, 0, 0, 0.75);
    }

   .x-btn.my-btndarkgrey {
      color: #ffffff;
      border-color: #595958;
      background-color: #595958;
      -webkit-box-shadow: 0 0.25em 0 0 #3b3b3b, 0 4px 9px rgba(0, 0, 0, 0.75);
              box-shadow: 0 0.25em 0 0 #3b3b3b, 0 4px 9px rgba(0, 0, 0, 0.75);
    }

    .x-btn.my-btndarkgrey:hover {
      color: #ffffff;
      border-color: #595958;
      background-color: #595958;
      -webkit-box-shadow: 0 0.25em 0 0 #3b3b3b, 0 4px 9px rgba(0, 0, 0, 0.75);
              box-shadow: 0 0.25em 0 0 #3b3b3b, 0 4px 9px rgba(0, 0, 0, 0.75);
    }

[jade]

Hi there,

Would you mind providing the link to the page where the button is so that we can check it?

Thank you.