Botões personalizados

[JorgeSouza]

Olá, pessoal!

 

Bom eu gostaria de uma "ajudona". Vi num site de jogos botões de redes sociais com efeitos muito maneiro e eu queria um igual.

 

Teria como pegar e fazer igual ? Eu não consigo pegar a parte CSS e nem a HTML.

 

Alguém poderia me ajudar? São os botões que está do lado direito do site: http://clashroyalearena.com/

[DiF]

@JorgeSouza Olá,

O efeito é com CSS3 animations. 

Veja um exemplo de como pode ser feito: https://jsfiddle.net/qweh4j87/

Este exemplo usa a técnica de sprite nas imagens dos ícones e css transition.

 

Dá para fazer de outros modos.. mas esse eu acho mais simples de entender.

[JorgeSouza]

@difPerfeito. Isso que eu queria!

 

Mas estou enfrentando alguns problemas, não consigo padronizar a posição do ícone. Podes me ajudar ?

 

https://jsfiddle.net/LeffzLqp/

[DiF]

@JorgeSouza  A questão é só você conseguir entender o lance da técnica de sprite no css.

Consiste em manipular a posição do background.

 

Por exemplo você tem uma imagem inteira com todos os estados do seu botão ( normal e hover)

Então setar  o background-position em cada. 

 

Vamos pegar por exemplo os botões que você postou:

.icon-mono {
  background: url("http://callmenick.com/_development/icons-css3-transitions/img/icons1.png");
  background-image: url("http://callmenick.com/_development/icons-css3-transitions/img/icons1.svg");
  background-color: #000;
  -webkit-transition: background 0.6s;
          transition: background 0.6s;
}

/* facebook */
.icon-mono.facebook {
  background-position: -24px -23px;
}

.icon-mono.facebook:hover {
  background-color: #0000CD;
  background-position: -24px -119px;
}

Basicamente,  a classe .icon-mono recebe como background a imagem "grande" contendo todos os estados. Veja que ali tem um png e outro svg.

 

 

Agora temos mais duas classes, chamada de .icon-mono.facebook  e .icon-mono.facebook:hover

No primeiro, Setamos a posição inicial da imagem do facebook e no segundo, setamos a posição da imagem do facebook com outra cor.

 

PS: se quiser diminuir o tamanho dos ícones, precisa diminuir a imagem também... 

PS2: Este não é a única solução...  dá para fazer com text-icons, usar jQuery... e etc

 

Veja o código funcionando: https://jsfiddle.net/LeffzLqp/1/

[JorgeSouza]

@dif Muito Obrigado. Você me ajudou demais!

 

Mais uma perguntinha: Existe uma maneira de dimensionar essa imagem pelo CSS ou qualquer outro tipo ? Pois ficou muito grande dentro do quadrado :\

[DiF]

@JorgeSouza Como mencionei...  SE você prestou a atenção.

34 minutos atrás, dif disse:

PS: se quiser diminuir o tamanho dos ícones, precisa diminuir a imagem também... 

A técnica é baseada em uma IMAGEM que contem todos os estados do botão.

 

Logo, você precisa diminuir a imagem, seja por photoshop ou qualquer outro programa de edição de imagens.

OU simplesmente usar a técnica icon-texts. onde você transforma uma imagem em um ícone SVG escalável.

 

Limitar no css não resolve, a não ser é claro, que tenhas uma imagem para cada botão e cada estado... aí com css é só limitar  o width, height e o background-size..

[JorgeSouza]

@dif Obrigado pela sua ajuda até aqui.

 

Bom consegui dimensionar a imagem com um código mais simples. E sim, eu prestei atenção no que você falou =D

 

O código foi este: background-size: 420px 130px;

 

Agora estou apenas arrumando a posição dos ícones na transição