Para o botão, você vai precisar de duas cores, uma para fundo do botão, e outra para borda.
Nessa dica, vou assumir que para o fundo botão, vai ser usado uma cor escura, então o texto para o botão será branco e a sombra escura.
Quando escolher a cor, escolha a mesma cor, com duas tonalidades diferentes, uma mais clara e uma mais escura.
Tabela de cores: http://html-color-codes.info/
Primeiro, você vai precisar desse CSS, já está todo comentado a função de cada linha
.bonito {
border-radius: 2px; /* arredondamento da borda */
display: inline-block; /* modo do mostragem */
font-family: "tahoma"; /* tipo da fonte */
font-size: 12px; /* tamanho da fonte */
font-weight: 700; /* peso da fonte */
padding: 6px 24px; /* espaçamento em relação ao elemento */
text-decoration: none; /* eliminando o underline */
text-shadow: 1px 1px 0px #111; /* sombra para o texto */
cursor: pointer; /* tipo do cursor sobre o texto */
}Esse estilo .bonito é padrão, ou seja, todos os botões vão ter ele.
Agora, vou criar uma class exclusiva para cor azul, que vai complementar o estilo acima
.bonito.azul{
color:#fff; /* cor do texto */
background-color: #2daebf; /* cor de fundo */
border: 1px solid #007d9a; /* cor da borda */
box-shadow: inset 0px 1px 0px 0px #007d9a; /* cor da sobra da caixa */
}Nesse estilo acima, você vai precisar das duas cores que citei acima, uma só o fundo, e outra para a borda e para a sombra da caixa.
Você pode alterar qualquer cor se quiser. Também pode criar outras class para aplicar em vários elementos, tipo, .bonito.verde, .bonito.laranja e por ai vai.
O estilo você pode usar em div, span, input button, entre outros, exemplo
<div class="bonito azul">algo</div>
<input type="button" class="bonito azul" value="algo">