@keyframes shiny-btn1 { 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } } @keyframes shake { 0% { -webkit-transform: translateX(0); } 10% { -webkit-transform: translateX(-10px); } 20% { -webkit-transform: translateX(10px); } 30% { -webkit-transform: translateX(-10px); } 40% { -webkit-transform: translateX(10px); } 50% { -webkit-transform: translateX(-10px); } 60% { -webkit-transform: translateX(10px); } 70% { -webkit-transform: translateX(-10px); } 80% { -webkit-transform: translateX(10px); } 90% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } .shinyButton { overflow: hidden; } .stickyButton { position: fixed; bottom: 20px; width: 100%; left: 0; right: 0; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.50); z-index: 10; } .shinyButton:before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: shiny-btn1 3s ease-in-out infinite; } .shake { animation: shake 1s; animation-iteration-count: 1; } .code { background-color: rgba(0.2,0.2,0.2,0.2); } @media (prefers-color-scheme: dark) { .MuiPopper-root > * { color:white; background-color: rgba(0,0,0,0.8); } } .darken { filter: brightness(0.5); } .MuiAlert-icon { align-items: center; }