Created
June 12, 2025 17:57
-
-
Save ochoarobert1/639c53e8783667cc7e52f54ab78c7e1e to your computer and use it in GitHub Desktop.
Joinchat Styling
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
| .joinchat__button__open { | |
| animation: 1.5s linear infinite sm-shake-animation; | |
| } | |
| .joinchat:not(.joinchat--chatbox) .joinchat__button { | |
| animation: 3s linear infinite waves-whatsapp; | |
| } | |
| @keyframes waves-whatsapp { | |
| 0% { | |
| box-shadow: 0 8px 10px rgba(48, 191, 57, 0.3), 0 0 0 0 rgba(48, 191, 57, 0.2), 0 0 0 0 rgba(48, 191, 57, 0.2); | |
| } | |
| 40% { | |
| box-shadow: 0 8px 10px rgba(48, 191, 57, 0.3), 0 0 0 35px rgba(48, 191, 57, 0.2), 0 0 0 0 rgba(48, 191, 57, 0.2); | |
| } | |
| 80% { | |
| box-shadow: 0 8px 10px rgba(48, 191, 57, 0.3), 0 0 0 55px rgba(48, 191, 57, 0), 0 0 0 26.7px rgba(48, 191, 57, 0.067); | |
| } | |
| 100% { | |
| box-shadow: 0 8px 10px rgba(48, 191, 57, 0.3), 0 0 0 80px rgba(48, 191, 57, 0), 0 0 0 40px rgba(48, 191, 57, 0); | |
| } | |
| } | |
| @keyframes sm-shake-animation { | |
| 0%, | |
| 100%, | |
| 25%, | |
| 75% { | |
| transform: rotate(0) scale(1) skew(0.017rad); | |
| } | |
| 35%, | |
| 55% { | |
| transform: rotate(-0.3rad) scale(1) skew(0.017rad); | |
| } | |
| 45%, | |
| 65% { | |
| transform: rotate(0.3rad) scale(1) skew(0.017rad); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment