Sempre achei a marca do Google simples, mas comecei a perceber que essa era a beleza do design deles; há algo no “apenas o suficiente” que é o equilíbrio perfeito entre o sem graça e o exagerado. O design do GMail envelheceu com o passar dos anos, e o Google acabou de atualizar seu design, e ele é fiel ao padrão de design do Google: simples o suficiente com um pouco de talento.
Parte do toque que eu realmente gosto é o novo design dos botões, que o senhor pode ver com o botão “Delete all SPAM now” (ao ver a pasta Lixeira) e outros botões semelhantes. O botão é plano (parece um link), mas o efeito de fundo animado é tão simples e elegante que não consigo nem explicar a sensação; é quase como se o efeito fosse menos “pesado” do que um simples text-decoration simples. Vamos examinar o CSS para que o efeito aconteça!
O HTML
O “botão” requer apenas um elemento HTML: um <span>:
<span class="google-button">Click here!</span>
O CSS
O efeito pode ser obtido com um elemento HTML porque usamos um elemento ::before pseudoelemento. Isolei os estilos apenas para aqueles que são necessários:
/* The core button */
.google-button {
align-items: center;
border: none;
display: inline-flex;
justify-content: center;
outline: none;
position: relative;
z-index: 0;
-webkit-font-smoothing: antialiased;
background: none;
border-radius: 4px;
cursor: pointer;
padding: 0 8px;
white-space: pre-wrap;
}
/* ::before, which will become the hover effect */
.google-button::before {
content: '';
display: block;
opacity: 0;
position: absolute;
transition-duration: .15s;
transition-timing-function: cubic-bezier(0.4,0.0,0.2,1);
z-index: -1;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: #4285f4;
border-radius: 4px;
transform: scale(0);
transition-property: transform,opacity;
}
Observe que a escala e a opacidade são 0 para ficarem invisíveis. E então o simples :hover CSS para iniciar o efeito:
.google-button:hover::before {
opacity: .06;
transform: scale(1);
}
A maior parte do efeito é configurada pelo ::before que todos os :hover precisou fazer foi elevar a opacidade e dimensionar para o tamanho normal!
Não consigo explicar por que gosto tanto desse botão, e isso parece ser a marca registrada de um design simples e bem-sucedido. Acho que gosto tanto do botão porque o efeito é incrivelmente leve, mas ainda assim animado. De qualquer forma, aproveite o botão e me avise se o senhor encontrar melhorias!
