Can't get rid of border on button

Coding Help
, ,
1

Can’t get rid of this border/shadow on bootstrap website. Tried everything.
Here’s what it looks like:

Anyone know the code to get rid of this?
Thanks :slight_smile:
Eddie

2

Only happens when I hover or click :slight_smile:

3

Can you share the css you have?

4

@RiversideRocks
Using bootstrap. Maybe some other stuff (adapting a template) - will have a look later
Tried this:

    <style>
      button.bg-primary {
        background: none;
        color: inherit;
        border: none !important;
        padding: 0;
        font: inherit;
        outline: none !important;
        box-shadow: none !important;
      }
      button.bg-primary:focus,
      button.bg-primary:active {
        background: #fd5f00 !important;
      }
    </style>
5

Hover, right?

      button.bg-primary {
        background: none;
        color: inherit;
        border: none !important;
        padding: 0;
        font: inherit;
        outline: none !important;
        box-shadow: none !important;
      }

      button.bg-primary:hover {
         border: none;
      }
1 Like
6

Think I’ve tried that but will have another go :joy:
Edit: @khalby786 didn’t work :frowning:

7

Make the button secondary instead of primary

1 Like
8

That’s it! I do with some some javascript code, meaning the css applied to buttons in the primary is ignored as it is changed to a secondary button. Let me try changing it. :slight_smile:
Edit: it worked!
Full css code:

    <style>
      button.bg-primary{
        border: none !important;
        outline: none !important
      }
            button.bg-primary:focus,button.bg-primary:active,button.bg-primary:hover{
        border: none !important;
        outline: none !important;
              background: #fd5f00 !important;
      }
      button.bg-darken{
        border: none !important;
        outline: none !important
      }

    </style>