뉴모티즘 (neumorphism) 버튼

---

< 참고 자료 >

 

https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/

https://neumorphism.io/#ffffff

https://codepen.io/sdthornton/pen/wBZdXq

https://gist.github.com/teddykishi/3eba129cc0fc7d7cbdce02aabfbc8858

---

.button {

    width           : 300px;
    height          : 300px;
    
    border-radius   : 20px;
    background      : #171717;
    box-shadow      : -1px -1px 4px rgb(60, 60, 60), 8px 8px 8px rgb(10, 10, 10);

    /* text */
    user-select     : none;
    display         : flex;
    justify-content : center;
    align-items     : center;
    font-size       : 100px;
    font-family     : sans-serif;
    font-weight     : bolder;
    color           : rgba(0,0,0, 0.6);
    text-shadow     : 1px 1px 2px rgba(255,255,255, 0.1);
    
                        
}

.button:active {

    box-shadow      : inset -2px -2px 4px #252525, inset 5px 5px 8px 2px #090909;
    font-size       : 95px;
                    
}