3D Neumorphism UI

.btn{
    height:46px;
    padding:0 32px;
    border:none;
    border-radius:8px;
    color:white;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
    margin-right:15px;
    transition:.2s;
    box-shadow:
    8px 8px 16px rgba(0,0,0,.2),
    -8px -8px 16px rgba(255,255,255,.9);
}
.btn:hover{
    transform:translateY(-3px);
}
.btn:active{
    transform:translateY(2px);
    box-shadow:
    inset 5px 5px 10px rgba(0,0,0,.25),
    inset -5px -5px 10px rgba(255,255,255,.5);
}

.btn-blue{
    background:#409eff;
}
.btn-green{
    background:#18a83b;
}
.btn-yellow{
    background:#ffad00;
}
.btn-red{
    background:#e53935;
}

.input{
    width:350px;
    height:48px;
    padding:0 18px;
    border:none;
    outline:none;
    border-radius:8px;
    background:#e9eef5;
    font-size:15px;
    color:#273248;

    box-shadow:
    inset 8px 8px 16px rgba(0,0,0,.16),
    inset -8px -8px 16px rgba(255,255,255,.95);
}
.input::placeholder{
    color:#98a4b8;
}
.input:focus{
    background:#f7faff;
    box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.15),
    inset -4px -4px 10px white,
    0 0 0 4px rgba(64,158,255,.15);
}

.card{
    width:300px;
    padding:28px;
    border-radius:12px;
    background:#e9eef5;
    box-shadow:
    15px 15px 30px rgba(0,0,0,.15),
    -15px -15px 30px white;
}
.card-number{
    font-size:34px;
    font-weight:bold;
    margin-bottom:8px;
}
.card-text{
    color:#7d889c;
}

.badge{
    padding:7px 14px;
    border-radius:6px;
}
.badge-blue{
    background:#dbeaff;
    color:#1677ff;
}