leumas-private-shared/src/styles/Neuromorphic.css

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

.neuro-button {
    background: #e0e0e0;
    border: none;
    border-radius: 50px;
    padding: 20px 40px;
    font-size: 20px;
    color: #555;
    cursor: pointer;
    position: relative;
    box-shadow: -5px -5px 10px #ffffff, 5px 5px 10px #aeaeae;
    transition: all 0.3s ease;
}

.neuro-button:active {
    box-shadow: inset -3px -3px 6px #ffffff, inset 3px 3px 6px #aeaeae;
    color: #000;
}

.neuro-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50px;
    background: #e0e0e0;
    z-index: -1;
    transition: all 0.3s ease;
}

.neuro-button:hover::before {
    box-shadow: -2px -2px 4px #ffffff, 2px 2px 4px #aeaeae;
}

.neuro-button:focus {
    outline: none;
}