Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jpsan

Mudar a cor de um botão Css

Recommended Posts

Olá a todos
Criei este botão no css

.botao{
	font-weight: bold;
	padding: 10px;
	float: left;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	color: #FFFFFF;
	margin-left: 20px;
}
.botao:hover{
	color: #330000;
	background-color: #FFFFFF;
	/*CSS 3*/
	border-radius: 10px 0px 10px 0px;
}
Como eu poderia mudar a cor dele usando javascript??Por exemplo ele é branco, e eu quero mudar ele para preto.Acredito que deve ser algo com o GetElementByClass, mas não deu certoObrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cristianoolv desculpe a ignorância (estou começando ainda). Mas eu não entendi muito bem com fazer.
Por exemplo eu crei este div

<div class="botao" onClick="MudaCor()"  >Teste </div>


Na função MudaCor eu colocaria isso??

 

botao.element.style.backgroundColor ='black'

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olha um exemplo simples que muda a cor de um botão para uma cor aleatoria...

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        button{
            border: 0;
            padding: 35px 50px;
            font-weight: bolder;
            color: #fff;
        }
    </style>
    <script>

    function mudaCor(el){
        el.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
    }

    </script>
</head>
<body>
    <button onclick="mudaCor(this)">Test</button>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tente utilizar do "GetElementById", no caso do JavaScript..

 

Nas funcões do botão você pode utilizar-se do "OnClick" ou "OnMouseOver" entre outros, depende de como você quer que ative a função...

 

Ficaria mais ou menos assim (testei e funcionou):

 

<style>

button{
	font-weight: bold;
	padding: 10px;
	float: left;
	border: 1px;
	border-color: #FFF;
	color: #FFFFFF;
	margin-left: 20px;
}

</style>

<script>
function mudarCor(){
	document.getElementById("botao").style.backgroundColor = "#000";
}
</script>

<button id="botao" onmouseover="javascript:mudarCor();"><a href="#">Teste</a></button>

 

Dai não será necessário utilizar da função HOVER do CSS, porque você já estará fazendo isso com o JavaScript:

 

.botao:hover{
	color: #330000;
	background-color: #FFFFFF;
	/*CSS 3*/
	border-radius: 10px 0px 10px 0px;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Opa M!K0L tranquilo?
Seguinte quase funcionou aqui.
O único problema é o botão tem as suas bordas arrendondadas e quando eu mudo a cor dele, ele fica quadrado.
Sabe o que pode ser feito para arrumar isso??
Outra coisa, acredito que não será possível tirar o hover, pois é ele que deixa as bordas arredondadas

Compartilhar este post


Link para o post
Compartilhar em outros sites

Como você quer fazer isso? Com :hover/onmouseover ou com o clique onclick?

Para personalizar o estilo de quando o usuário suspender o objeto sobre o elemento, opte por utilizar CSS junto a pseudo-classe :hover.

.botao:hover {
  /* declarações aqui: background #000, color #fff... */
}

O HTML não muda.

Com o clique do mouse (onclick) ou com passar do mouse (onmouseover), a função é a mesma no Javascript. Utilizando o getElementsByClassName (e não getElementById, como sugeriram aí em cima, afinal seu elemento está sendo estilizado com uma classe), faça o seguinte:

function tornarVermelho() {
  document.getElementsByClassName("botao")[0].style.background = "red";
}

Agora manipule o elemento HTML utilizando os atributos onclick ou onmouseover. Por exemplo:

<span class="botao" onclick="tornarVermelho();">Clique aqui</span>
<span class="botao" onmouseover="tornarVermelho();">Passe o mouse</span>

Sobre a borda, deixe o border-radius na classe botao. Nem o CSS com :hover e o Javascript mudarão isso. Veja o resultado: http://codepen.io/diessicagurskas/pen/pikbo As propriedades se mantiveram. :)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom para explicar melhor o que quero aqui está o site: http://smarthouse.p.ht/site/index.php

Como vocês podem ver a cor de fundo muda de acordo com as progress bars.
O problema é que dependendo da cor os botões se tornam invisíveis. Então o que eu queria fazer era mudar a cor de dos botões para assim o usuário conseguir enxergar eles.
Para isso eu fiz uma função que determina se a cor é escura ou clara:

 

function MudaCor(valor, aux) //Muda o background color usando valores rgb
{
valor = valor *25;
if(aux=='N')
{
document.body.style.backgroundColor= 'rgb(' + valor + ',' + valor + ',' + valor + ')';
vermelho=valor;
azul=valor;
verde=valor;
}
else if (aux=='R')
{
document.body.style.backgroundColor= 'rgb(' + valor + ',' + verde + ',' + azul + ')';
vermelho = valor;
}
else if (aux=='G')
{
document.body.style.backgroundColor= 'rgb(' + vermelho + ',' + valor + ',' + azul + ')';
verde = valor;
}
else if (aux=='B')
{
document.body.style.backgroundColor= 'rgb(' + vermelho + ',' + verde + ',' + valor + ')';
azul = valor;
}
document.getElementsByClassName("botao")[0].style.background = 'rgb(' + vermelho + ',' + verde + ',' + azul + ')';
//Mudar a cor das letras
TomCor = vermelho + azul + verde; //Calcula a media das cores Rgb isoladas
if(TomCor <=249)
{
document.getElementsByTagName('h1')[0].style.color='white';
document.getElementsByTagName('p')[0].style.color='white';
document.getElementsByTagName('p')[1].style.color='white';
}
else
{
document.getElementsByTagName('h1')[0].style.color='black';
document.getElementsByTagName('p')[0].style.color='black';
document.getElementsByTagName('p')[1].style.color='black';
}
}

Então o problema é que não existe nenhum evento onclick ao algo assim.
Basicamente então o que eu preciso fazer é mudar a propriedade background-color do hover.
Outra coisa tentei colocar a propriedades do hover dentro da classe botão e não deu muito certo.

Obs: o código está meio confuso, então a função MudaCor() é a ultima do arquivo script.js

obs2: login: Adm

senha: 1234

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você poder usar cookies ou passar parametro pela url e pegar com o window.location.href e fazer um split para pegar o valor!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Fala Ted k' vc tem como me mostrar eu ainda estou aprendendo e não sei como fazer.

 

 

Tenho um exemplo e gostaria que alguém me ajudasse, eu gostaria que os 2 button funcionem em páginas separadas.

 

<html>

<head>

<script>

t = 10; // tempo para habilitar o botão

function vote(){

setTimeout('formulario.enviar.disabled = true' , t)

}

 

</script>

</head>

 

<body>

<form name="formulario">

<input type=button value=" Votar " onclick="vote();abre()" style="font-family:verdana;font-size:8pt;color:#4f4f4f">

<br>

<input type=button name="enviar" value=" você ja votou " ENABLE onClick="window.location='entrar.html'" style="font-family:verdana;font-size:8pt;color:#fff">

</form>

 

</body>

</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.