Ir ao conteúdo
  • Cadastre-se
JorgeSouza

Botões personalizados

Recommended Posts

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/

Editado por JorgeSouza

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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/

Editado por JorgeSouza

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

 

icons1.png

 

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/

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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 :\

Editado por JorgeSouza

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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..

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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

Editado por JorgeSouza

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×