Button color after being clicked

Question

I used Boostrap to create arrow buttons.I changed the css properties to make sure the background of the buttons are the same as the body background. I also changed the properties to make sure there is no border and that it stays black on hover. The issue is when I click it I get a blue border around and when the mouse in not hovering over it it turns blue. I have tried a bunch of stuff but none is working. Any help would be greatly appreciated.

        <div id="breakArrows">
            <h6>Session Break</h6>
            <button class="btn btn-info arrowbtn" > <i class="fa fa-arrow-up"></i></button>
            <h4 class="arrownum">1</h4>
            <button class="btn btn-info arrowbtn" ><i class="fa fa-arrow-down"></i></button>
        </div>
         <div id="center">

#break{
    width:20%;
    height:100%;
    background-color:black;
    float: left;
}

#breakArrows{
    width:10%;
    height:100%;
    background-color:black;
`   float:left;
    padding-left:23px;
    padding-top:175px;
}

.arrowbtn{
    background-color:black; 
    border: none;
    padding-left:33px;
    padding-top: 10px;
}

.arrowbtn:hover{
   background-color:black;
   border-color: black;
}

.arrownum{
    color:white;
    padding-left:33px;
}

h6{
    color:white;
}

Answer 1

Very likely you will have to override bootstrap's :focus styles as well as :hover -- if you simply want the hover and focus styles to be the same you can do this:

.arrowbtn:hover, .arrowbtn:focus {
   background-color:black;
   border-color: black;
}

otherwise add a separate rule just for .arrowbtn:focus and use whatever styles you want it to have. You may also have use for :active depending on your design.

Answer 2

you could declare:

<button class="btn btn-info arrowbtn" style="background-color:black!important"> <i class="fa fa-arrow-up"></i></button>

on the button element itself