Jump to content
petrochinski

Como alterar a cor do button utilizando solid (CSS)

Recommended Posts

Boa tarde,

 

Eu fiz um <button></button> no HTML e no CSS coloquei o seguinte código:

 

background-color: green solid;

 

Porém o botão não fica verde :/

 

Alguém sabe me dizer o porque?

 

Desde já Grato!!!

Share this post


Link to post
Share on other sites

Olá @petrochinski, seja bem-vindo!

 

1 hora atrás, petrochinski disse:

Alguém sabe me dizer o porque?

Pq background-color espera apenas um valor e "green solid" não é um valor válido.

 

Tente apenas assim:

background-color: green;

 

Share this post


Link to post
Share on other sites
40 minutos atrás, Matheus Tavares disse:

Olá @petrochinski, seja bem-vindo!

 

Pq background-color espera apenas um valor e "green solid" não é um valor válido.

 

Tente apenas assim:


background-color: green;

 

Fazendo desta forma ele perde o aspecto solid que o deixa mais bonito. Mas consegui encontrar o que queria, era só fazer o seguinte:

 

button{
    color: white;
    background-color: red;
    border: solid 1px #CCC;
    border-radius: 2px;
    width: 100px;
    height: 35px;
    margin-left: 125px;
}

o Color vai para font. Background-color a cor do botão e a border que entra o solid; Deu certo! :D

 

 

Muito obrigado Matheus.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By jaquelss
      Os erros estão na imagem anexada. Não sei exatamente o que colocar quanto o conteúdo no menu, mas quanto ao botão segue abaixo:
       
      <div class="col-md-2 col-sm-6 col-6">
      <button class="button button-rounded btn-block nomargin"
      style="margin-top: 29px !important;"><a href="http://localhost/xavier/#/imovel"></style>Encontrar</a></button>
      </div>
       
      Tenho certeza que é uma bobagem minha, mas perdi a tarde tentando resolver.
      Ainda sou estudante, não tenho conhecimento total quanto a isso (apesar de que acho que ninguém tem né kk).
      Enfim,
      Agradeço desde já.

    • By Remilton Silva
      <script> $(document).ready(function() { $("button").click(function(){ if ($(this).val() == '' ) { $("button").disabled=true; }else { $("button").disabled=false; } }); }); </script> Olá prezados,
       
      Estou pesquisando mas ainda não achei algo que me ajude com o cod.
      se alguém puder ajudar, será de grande valia.
       
      preciso que o button só seja ativado quando todos os inputs forem preenchidos, como faço isso em JavaScript?
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="corpo-form"> <h2>Cadastrar</h2> <input type="text" class="form-control" name="nome" placeholder="Nome Completo" maxlength="30"><br><br> <select class="form-control" name="gerencia"> <option value="Selecione uma Opção" selected>Selecione uma Opção.</option> <option value="GECOR">Vendas</option> <option value="GECON">Almoxarifado</option> <option value="GECIN">RH</option> <option value="DIRETORIA">DIRETORIA</option> </select><br><br> <input type="text" class="form-control" name="telefone" placeholder="Telefone"maxlength="30"><br><br> <input type="email" class="form-control" name="email" placeholder="E-mail" maxlength="40"><br><br> <input type="password" class="form-control" name="senha" placeholder="Senha" maxlength="15"><br><br> <input type="password" class="form-control" name="confsenha" placeholder="Confirmar Senha" maxlength="15"><br><br> <input type="button" class="btn btn-danger btn-outline-light btn-block" value="Entrar" maxlength="" required="required"> <br> </div> </body> </html>  
    • By petrochinski
      Eu tive uma ideia muito boa, mas não consegui fazer ainda.
       
      A ideia é simples, eu tenho um botão escrito 'Contato', quando passar o mouse gostaria que ele "abrisse" uma div logo abaixo (dropdown), como por exemplo aparecer o telefone somente se passar o mouse.
       
      Não achei nenhum tópico com essa ideia... é que gostaria de fazer sem utilizar nav, pois nav é o menu, e a ideia inicial é de fato ser um botão que aparece as informações quando se passa o mouse.
       
      Grato :)
    • By fabiodurgante
      ola eu tenho o seguinte esse codigo apaga todos eelementos da tagname
      const elements = window.content.document.getElementsByClassName("tagname");
         while (elements.length > 0) elements[0].remove();
          
      tem paginas com botao inativos e tem que espperar 10 segundos para ativar botao poprem as vezes passa tempo e naoa ativa o bota como posso fazer para ativas todos os botoes que existe na pagina somente 1 botao poorem nao sei classname e nao sei id como poderia ativar todos os botoes ???
    • By Carlos Web Soluções Web
      Olá, pessoal, boa tarde !!
       
      Estudei toda uma apostila sobre CSS, porém não estou conseguindo realizar uma simples tarefa !!
      Ao passar o mouse no 'button.botao', ativar o movimento do 'div.traco' ! Eis abaixo o 'Código Fonte' que estou tentando:

       
      <!DOCTYPE html> <html> <head> <style> button.botao { width: 150px; height: 50px; border: none; background-color: black; color: red; font-size: 23px; } div.traco { width: 20px; height: 10px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } button.botao:hover div.traco { width: 150px; } </style> </head> <body> <button class="botao">Botao</button> <div class="traco"></div> </body> </html> Me ajudem por favor !
      Obrigado !!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.