2

Tenho um problema com as cores dos meus botões e ainda não percebi como resolver. Se tiver um button com type submit não fica na cor que pretendo.

Exemplo com type submit:

<button type="submit" data-toggle="modal" class="btn btn-success" onclick="inserir_registo()">Enviar</button>

inserir a descrição da imagem aqui

Exemplo sem type submit, já fica na cor que pretendo:

<button type="button" data-toggle="modal" class="btn btn-success" onclick="inserir_registo()">Enviar</button>

l

Alguém me pode explicar a razão de isto acontecer?

3
  • 2
    Acredito que em alguma parte do seu CSS vc mudou algo que não devia... talvez tenha colocado algo como [type="submit" ] { background: red} ou algo assim em algum custom.css que está chamando no documento. Pq aqui eu testei com o BS3 padrão e ficou ver em qq um dos casos
    – hugocsl
    Commented 17/05/2019 às 11:37
  • @hugocsl não alterei nada no css e se colocar esta linha <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> na minha página corrigi esse problema, mas altera a apresentação da barra do menu
    – Bruno
    Commented 17/05/2019 às 11:50
  • Cara vc vai está tendo um problema de conflito de .CSS nesse caso o melhor é colocar uma noca classe no botão e nessa classe colocar o background-color que vc quer com !important pra ver se resolve.... Não é uma opção que me agrada, mas sem ver o projeto não da para ver onde é o erro...
    – hugocsl
    Commented 17/05/2019 às 11:57

1 Resposta 1

2

Como conversado nos comentários, olha ai um modelo com um template básico de Bootstrap 3, usei o seu código dos botões, e ficou normal, os dois verde. E no terceiro btn, eu coloquei uma classe a mais que vc pode ver no Style e mesmo o btn tendo a class btn-success eu coloquei a classe .bg com o background-color: blue e !important. Então mesmo com o problema na cor vc consegue contorna pelo CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
  .bg {
    background: blue !important;
  }
</style>
</head>
<body>
  
  <button type="submit" data-toggle="modal" class="btn btn-success" onclick="inserir_registo()">Enviar</button>

  <button type="button" data-toggle="modal" class="btn btn-success" onclick="inserir_registo()">Enviar</button>

  <button type="button" data-toggle="modal" class="btn btn-success bg" onclick="inserir_registo()">Enviar</button>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .