/* Directional Button Hover */ .btn .btn__text { transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1); } .btn .btn__circle { transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.4s cubic-bezier(0.625, 0.05, 0, 1); transform: translate(-50%, -50%) scale(0) rotate(0.001deg); background-color: #D1FD88; } .btn:hover .btn__circle { transform: translate(-50%, -50%) scale(1) rotate(0.001deg); } /* Dark */ .btn[data-theme="dark"] .btn__circle { background-color: #D1FD88; } .btn[data-theme="dark"]:hover .btn__text { color: #031819; } /* Light */ .btn[data-theme="light"] .btn__bg { background-color: #EFEDE3 } .btn[data-theme="light"] .btn__text { color: #031819; } .btn[data-theme="light"] .btn__circle { background-color: #9FCCC8; } /* Primary */ .btn[data-theme="primary"] .btn__bg { background-color: #D1FD88; } .btn[data-theme="primary"] .btn__text { color: #031819; } .btn[data-theme="primary"] .btn__circle { background-color: #b8ec6f; }