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;
}

```