Efeito em botao clicado

[CrazyLOL 2]

Galera uma duvida, simples...

 

Tenho um meu site um mural de recados, abaixo do mural quero por um botao inicialmente na cor cinza do simbolo do facebook, quando o cara pressionar nele quero que ele fique na cor azul. depois que o cara apertar no botao submit do meu mural, iria checar se o botao foi pressionado ou nao se foi pressionado iria compartilhar o que ele postou no mural do face dele.

 

A minhda duvida esta sendo nesse efeito de colorir o botao e pegar se foi clicado ou nao..

 

Alguem poderia dar uma força?

[reebr 94]

Não seria melhor trabalhar com um input type='checkbox' e somente mudar a aparência dele para parecer um botão?

[CrazyLOL 2]

E como iria fazer esta jogada?

Não manjo nada no css .. Kkkk

[Diego Rinno 35]

Não tem muito a ver necessariamente com CSS, no seu caso. Vai precisar do evento OnClick do javascript pra saber se o usuário clocou ou não no botão. Um exemplo bem simples de como mudar a cor de um botão com javascript e CSS é:

<button id="botao" style="background-color:red;" OnCLick="this.style.backgroundColor='blue';">Meu botão</button>

Se quiser uns efeitos mais bonitos, pode usar o jQuery e estilizar melhor o botão com CSS, colocando bordas e aplicando um efeito de transição. Com jQuery eu faria mais ou menos assim:

<script src="https://www.fabricademicro.com.br/Index/jquery-1.11.2.js" type="text/javascript" language="javascript"></script>
<style type="text/css">
.botao{
  background-color:red;
  border:1px solid red;
  border-radius:3px;
  transition:all .4s ease-in-out;
  color:white;
  font-size:20px;
  padding:5px;
}
.botao:hover{
  cursor:pointer;
}
.botao:focus{
  outline:none;
}
</style>
<button class="botao" OnClick="$(this).css('background-color','blue');">Meu Botão</button>

Basicamente ali eu defini a cor vermelha pro fundo original, cor branca pra fonte, borda arredondada, um espaçamento interno entre a marge e a fonte, um efeito de transição, depois coloquei que quando o mouse passar por cima vai trocar o cursor pro ponteiro de links (a mãozinha) e depois eu disse que quando o botão estiver em foco, não vai ter aquela linha azul (outine) em volta dele.

 

No OnClick só mudei a cor do fundo usando jQuery. Bem simples. Dá pra fazer coisa muito melhor, foi só um exemplo.