*::-webkit-scrollbar { display: none; } mark { padding: 2%; border-radius: 20px; background-color: aquamarine; } #loader { position: relative; animation: spin988 2s linear infinite; width: 50px; height: 50px; top: calc(50% - 25px); bottom: calc(50% - 25px); left: calc(50% - 25px); right: calc(50% - 25px); } #loader .circle { --color: #333; --dim: 1.2rem; width: var(--dim); height: var(--dim); background-color: var(--color); border-radius: 50%; position: absolute; } #loader .circle:nth-child(1) { top: 0; left: 0; } #loader .circle:nth-child(2) { top: 0; right: 0; } #loader .circle:nth-child(3) { bottom: 0; left: 0; } #loader .circle:nth-child(4) { bottom: 0; right: 0; } @keyframes spin988 { 0% { transform: scale(1) rotate(0); } 20%, 25% { transform: scale(1.3) rotate(90deg); } 45%, 50% { transform: scale(1) rotate(180deg); } 70%, 75% { transform: scale(1.3) rotate(270deg); } 95%, 100% { transform: scale(1) rotate(360deg); } } /* CSS */ button { appearance: none; background-color: transparent; border: 2px solid #1A1A1A; border-radius: 15px; box-sizing: border-box; color: #3B3B3B; cursor: pointer; display: inline-block; font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; font-size: 16px; font-weight: 600; line-height: normal; margin: 0; min-height: 60px; min-width: 0; outline: none; padding: 16px 24px; text-align: center; text-decoration: none; transition: all 300ms cubic-bezier(.23, 1, 0.32, 1); user-select: none; -webkit-user-select: none; touch-action: manipulation; width: 100%; will-change: transform; } button:disabled { pointer-events: none; } button:hover { color: #fff; background-color: #1A1A1A; box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; transform: translateY(-2px); } button:active { box-shadow: none; transform: translateY(0); }