specific border + background color for button

Question

I would to display a button with material ui who would look like this :

However, I manage only to do this for the moment :

Here is my current code. If you can tell me where I do block and how to achieve, I would really appreciate.

iconButton: {
    background: 
        'linear-gradient(#222, #222), 
        linear-gradient(to right, white, black, white) !important',
    borderRadius: '1rem !important',
    border: '4px solid transparent !important',
    backgroundRepeat: 'no-repeat !important',
    backgroundOrigin: 'padding-box, border-box !important',
    borderWidth: '10px !important',
    position: 'relative !important',

    '& ::before': {
        content: '""',
        position: 'absolute',
        top: '-5px',
        bottom: '-5px',
        left: '-5px',
        right: '-5px',
        border: '6px solid #222',
        borderRadius: '0.8rem',
    },
}

Cheers everyone

Answer 1

try adding inside and outside shadow to it. check https://www.cssmatic.com/box-shadow for more details.

.shadow {
 -webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.75) ,inset 0px 0px 3px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.75), inset 0px 0px 3px 3px rgba(0,0,0,0.75);
box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.75) ,inset 0px 0px 3px 3px rgba(0,0,0,0.75);
}