Efeito ondulação com :hover.
A Pen by Bruno Nepomuceno on CodePen.
Last active
June 11, 2020 01:55
-
-
Save brunonepomuceno/c2be96d5c64407c00dbd0a0b21d72627 to your computer and use it in GitHub Desktop.
Ripple effect em CSS puro
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class=content> | |
| <button class="ripple">Ripple effect</button> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Uma tela de interface típica possui muitos elementos. Os efeitos de "hover" informam instantaneamente aos usuários com o que eles podem interagir, fornecendo feedback visual nos botões. Mas há um problema: os efeitos "hover" são para aplicativos de desktop, não móveis. | |
| Como não há dispositivos de mouse no celular, os usuários não têm o luxo de usar efeitos de "hover". O uso do efeito de "hover" em aplicativos móveis faz com que os botões fiquem presos no estado de "hover" quando tocados. Essa viscosidade não apenas confunde os usuários, mas os frustra quando são forçados a tocar duas vezes nos botões para iniciar uma ação. | |
| Um efeito ondulação fornece o feedback visual que os usuários precisam quando tocam em um botão. Os usuários veem uma animação ondulada no botão que garante que seus dedos atinjam o alvo com precisão. Se eles não vêem um efeito ondulação, eles sabem que erraram no botão. O feedback visual fornece a confirmação imediata de um toque preciso, para que eles não esperem por uma resposta e se perguntem por que nada está acontecendo após um erro. | |
| #uxmovement */ | |
| @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900); | |
| $font-stack: 'Roboto', sans-serif; | |
| $ice-white: #ecf0f1; | |
| $root-tomato: #e1332d; | |
| $button-tomato: #611613; | |
| $active-tomato: #611613; | |
| $hover-tomato: #C72D28; | |
| *{ | |
| font-family: $font-stack; | |
| font-weight: 600; | |
| span{ | |
| color: $ice-white; | |
| font-size: 1.2rem; | |
| } | |
| } | |
| body{ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: white; | |
| background-color: $root-tomato; | |
| /* Efeito ondulação */ | |
| .ripple { | |
| background-position: center; | |
| transition: background 0.8s; | |
| } | |
| .ripple:hover { | |
| background: $hover-tomato radial-gradient(circle, transparent 1%, $hover-tomato 1%) center/15000%; | |
| } | |
| .ripple:active { | |
| background-color: $active-tomato; | |
| background-size: 100%; | |
| transition: background 0s; | |
| } | |
| /* Estilização do botão */ | |
| button { | |
| border: none; | |
| border-radius: 2px; | |
| padding: 12px 18px; | |
| font-size: 16px; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| color: white; | |
| background-color: $button-tomato; | |
| box-shadow: 0 0 4px #ED362F; | |
| outline: none; | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
ripple-effect
ripple-effect