Efeito de slide de texto flutuante CSS3

Desde que vi o vídeo do estudo de caso do USA Today, sempre fui fã do trabalho que a Fantasy Interactive tem lançado. Eles sempre fazem algo diferente em termos de design e layout em cada site que criam.

Um trabalho com o qual fiquei realmente impressionado foi a reformulação do site da Wacom . Excelente uso de cor, fotografia e animações sutis. As animações de foco em particular, eu pensei, adicionaram uma ótima sensação ao site e por alguma razão eu pensei que seria muito legal descobrir como elas funcionavam e replicá-las. Assim nasceu este tutorial.

Esta página mostrará como funcionam as animações de pairar de botões, aquelas que deslizam o texto para cima para mostrar outro trecho de texto (no caso do site Wacom, o mesmo texto). Eu só descobri como fazer isso verticalmente.

DEMO

O código

Primeiro, o HTML junto para um botão.

<div class="blue-btn">
  <a class="first-link" href="">
    First Text
  </a>
  <a href="">
    Second Text
  </a>
</div>

E é basicamente isso, o resto é tudo CSS.
Colocarei todo o código final aqui e examinarei certas partes.

a{
  color: white;
  text-decoration:none;
  text-align: center;
  display:block; /* important */
}

.blue-btn, .first-link{
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;     
}

.blue-btn{
  height: 64px;
  font: normal normal 700 1em/4em Arial,sans-serif;
  overflow: hidden;
  width: 200px;
  background-color: #3b5998;
}

.blue-btn:hover{
   background-color: #003D99;
}

.blue-btn a:hover{
  text-decoration: none;
}

.first-link{
  margin-top: 0em;   
}

.blue-btn:hover .first-link{
  margin-top: -4em;
}

CSS explicado

a{
  color: white;
  text-decoration:none;
  text-align: center;
  display:block; /* important */
}   

** Bloco de exibição ** aqui é muito importante, como disse no comentário, para posicionar os botões verticalmente, um acima do outro.

.blue-btn{
  height: 64px;
  width: 200px;
  font: normal normal 700 1em/4em Arial,sans-serif;
  overflow: hidden;
  background-color: #3b5998;
}

A ** altura e largura ** devem ser especificadas. O estouro deve estar ** escondido ** para que você não possa ver o botão ‘Segundo texto’ (veja o html). A altura da linha da fonte (4em) centraliza o texto verticalmente no botão, mas isso pode mudar dependendo da altura.

.blue-btn, .first-link{
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;     
}

Transições CSS3 (observe que não há prefixo -o-, pois o opera agora suporta webkit). Sem isso, o botão apenas aparecerá em vez de deslizar. Tenho certeza que você pode fazer isso em js, mas, meh.

.blue-btn:hover{
   background-color: #003D99;
}

Alterar a cor do plano de fundo quando você passa o mouse é opcional, mas adiciona um efeito muito legal ao botão, como se o novo texto que desliza fosse um botão completamente diferente.

.blue-btn:hover .first-link{
  margin-top: -4em;
}

Este pedaço de código é a única razão pela qual demos a classe ‘primeiro link’ para o primeiro link. Este código faz o primeiro link subir quando você passa o mouse sobre ‘blue-btn’.

Todo o resto é bastante autoexplicativo. Você pode conferir uma demonstração do item final abaixo (e acima).

DEMO