CODEWITHSUNDEEP
csshtmltwitter-bootstrap
K4NU 420
K4NU 420

Reputation: 53

Bootstrap button outline

I have a problem with a button.

I want to fix that gray effect on click but i don't know how to do so. 

<div class="col-lg-7 col-sm-5 col-md-11">
                        <form class="navbar-form">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Look for something cool">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary"><i class="fas fa-search"></i></button>
                            </div>

Upvotes: 1

Views: 6773

Answers (3)

Motassem Kassab
Motassem Kassab

Reputation: 1815

add this to your css

button:focus {
  box-shadow: none !important;
  outline: none !important; 
}

PS: it's not recommended to remove it, as it is meant to make the user experience more accessible for people with disabilities or people who are not using touch/mouse as control (for example, if you're trying to navigate to that button using TAB button it will be very hard)

Upvotes: 3

Victor G.S.
Victor G.S.

Reputation: 61

I think you are referring to the outline of the button when clicked/focused.

here is the CSS you might consider:

    .btn:focus {
        outline: 0;
    }

Here is the detailed answer to your question. Remove blue border from css custom-styled button in Chrome

Upvotes: 0

Sam
Sam

Reputation: 127

Do you mean the hover? if so create some custom CSS that states:

.btn-outline-secondary:hover{
  // YOUR STYLES HERE (the grey comes from the background so...)
  background: red (or whatever you want)
}

Upvotes: 0

Related Questions