Remove button border

3

I have a Jumbotron btn that I can not get the hover of the button (the blue rectangle), already tried to disable all styles in the chrome console but it does not work.

<button type="submit" class="btn">Entrar</button>

.jumbotron
{
    text-align: center;
    border-radius: 25px;
    display: block;
    vertical-align: middle;
    background-color: #fefefe;
    width: 520,50 px;
    height: 687,50 px;
    font-size: 15px;
}

.jumbotron .btn
{
    padding: 0px 0px;
    font-size: 18px;
    height: 60px;
    background-color: #fefefe;
    background-image: url('images/bt_03.jpg');
    background-repeat: no-repeat;
    background-position: center;
    color: #bb4200;
    font-family: ubuntu;
    width: 120px;
    font-weight: normal;
    box-shadow: 0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(0,0,0,0) !important;
    border-bottom: 0px;
     border:none!important;
    background-color: white!important;

}

when I click.

Any suggestions?

    
asked by anonymous 03.02.2016 / 17:48

4 answers

4

Dude, you can use focus.

.jumbotron .btn:focus{
outline: thin dotted;
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: 0px;
}
.jumbotron:focus {
 outline: thin dotted;
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: 0px;
}
    
03.02.2016 / 18:20
3

Try this:

.jumbotron:hover {
    border:none!important;
    background-color: white!important;
}

It would be easier if you made the button code available ...

    
03.02.2016 / 17:54
1

In my case this worked:

.jumbotron:focus{
  outline-style: none;
}
    
25.08.2018 / 17:29
0

What you can do is overwrite the hover rule with !important , something like:

#id:hover {border:none!important}
    
03.02.2016 / 17:52