Remove edge of button

Asked

Viewed 27,834 times

3

I own a Jumbotron btn I can’t get the hover button (the blue rectangle), I have tried to disable all Tyles on 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.

inserir a descrição da imagem aqui

any suggestions?

css bootstrap-3

4 answers

4


Dude, you can use phocus. 

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

  • Clap Clap, it worked perfectly. I thank each one helped a little bit.

  • 1

    @Guilhermelima I see in the answers some telling you to use !important. Alert: If you need to use the !important is why something in your css is not as correct as it should be. Rare are the cases where a !important is necessary. Keep in mind.

  • I’m glad I could help!

3

Try this:

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

It would be easier if you provided the button code...

  • I edited the question with but one problem.

  • Try this . Jumbotron::active { border:None! Important; background-color: white! Important; } . Jumbotron::actived { border:None! Important; background-color: white! Important; }

  • didn’t work..

  • Try this: . Jumbotron . btn:actived { border:None! Important; background-color: white! Important; }

  • nothing yet friend, I added more information in the question.

  • Put this: . btn:active{ border:None! Important; background-color: white! Important; }

Show 1 more comment

1

In my case it worked this:

.jumbotron:focus{
  outline-style: none;
}

0

what you can do is over write the rule of the Hover with !important, something like:

#id:hover {border:none!important}

  • I edited the question with but one problem.

  • would have to see the class that gets the button to help you better... but just set the class and put the border:none!important

  • I’ll edit the question again, but the class is btn

  • either you put an id on it, and link to the id (#id), or it will apply to all . btn

  • I want you to apply to everyone,

  • then it’s only by .btn {border:none!important} removes class . Jumbotron from css selector on that part

  • negative, already has this code and does not work

  • so send the code here because the information is not enough.

  • edited the question came to see?

  • I would have to inspect who is puts the edge and on which element, because if the edge was in . btn, it would have come out with the rule. (if he is the son of . Jumbotron as it is in css)

Show 5 more comments

Browser other questions tagged css bootstrap-3

You are not signed in. Login or sign up in order to post.