Efeito mudança de cor.

[rafaelsouzab 2]

Gostaria de saber como fazer este efeito, no site tem um botão em baixo dos horarios do curso escrito veja as opções de bolsa e financiamento, sei que deve ser algo facil de se fazer mas estou iniciando agora, não queria algo rapido sabe, gostaria de fazer com este delay, parece que esta utilizando um toggle, teriam alguma ideia?

 

http://www.fiap.com.br/graduacao/tecnologo/analise-e-desenvolvimento-de-sistemas/

[codercss 14]

Olá,

 

Terá que utilizar este CSS:

.botao {
  background: #DDD;
  border:2px solid #ED145B;
  display:inline-block;
  font:12px/18px 'Gotham HTF Bold';
  margin-top:60px;
  padding:18px 30px;
  text-transform:uppercase;
  -webkit-transition:all 400ms;
  transition:all 400ms;
}

.botao:hover {
  background:#ED145B;
}

A class "botao" está criada no html. Para fazer o efeito do de mudança de cor tem que recorrer ao selector hover. Que faz a cor mudar para #ED145B. Para fazer o efeito de "arrasto", tem que recorrer à propriedade -webkit-transition, duas últimas linha na primeira utilização da classe botao.

O resto é CSS, para editar o botão.

Fica aqui um exemplo: https://jsfiddle.net/pkddsb0L/1/ e bons estudos!

 

Nota: Agora fiquei eu com uma dúvida :) Como fazo para chamar a função aviso() no JS? Dá para utilizar a função e depois abrir o site numa nova aba?

 

Obrigado

[L. Henrique 179]

Olá,

 

Terá que utilizar este CSS:

.botao {
  background: #DDD;
  border:2px solid #ED145B;
  display:inline-block;
  font:12px/18px 'Gotham HTF Bold';
  margin-top:60px;
  padding:18px 30px;
  text-transform:uppercase;
  -webkit-transition:all 400ms;
  transition:all 400ms;
}

.botao:hover {
  background:#ED145B;
}

 

Rafael e Codercss,

 

Um adendo a resposta do Coder... Sempre que definir uma propriedade transition, é interessante que também defina como ela vai funcionar/agir. Quando você define:

-webkit-transition: all 400ms;
transition: all 400ms;
/* Não esqueça também de: (para navegadores mais antigos) */
-moz-transition: all 400ms;
-ms-transition: all 400ms;
-o-transition: all 400ms;

Ele automaticamente adiciona a função padrão do transition, que seria o ease. Esses métodos definem como vai funcionar, exemplo: A transição inicia rápida e termina devagar = ease-out. O código ficaria da seguinte maneira:

transition: all .4s ease-out;

Também existem outras propriedades de transição, segue algumas delas:

• Ease
• Ease-in
• Ease-out
• Ease-in-out
• Cubic-bezier

Cubic-Bezier é bem interessante, já que você pode manipular a transição de uma forma bem mais completa, sem falar que deixa a transição bem mais interativa para o usuário. Veja esse site: http://cubic-bezier.com/ - brinque com suas animações e números.

 

Caso queira um exemplo das diferenças entre todos esses transitions, preparei um demo no JSFiddle.

 

Abraços!

[rafaelsouzab 2]

Muito obrigado codercss e Henrique pela ajuda!

[codercss 14]

Muito Obrigado L. Henrique :)

 

Viva ao software livre, viva à partilha de conhecimento :) Bons estudos e bons códigos