#e8e8e8
1.btn { 2 display: grid; 3 place-items: center; 4 background: #e3edf7; 5 padding: 1.4em; 6 border-radius: 10px; 7 box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15), 8 -6px -6px 10px -1px rgba(255,255,255,0.7); 9 border: 1px solid rgba(0,0,0,0); 10 cursor: pointer; 11 transition: transform 0.5s; 12} 13 14.btn:hover { 15 box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2), 16 inset -4px -4px 6px -1px rgba(255,255,255,0.7), 17 -0.5px -0.5px 0px rgba(255,255,255,1), 18 0.5px 0.5px 0px rgba(0,0,0,0.15), 19 0px 12px 10px -10px rgba(0,0,0,0.05); 20 border: 1px solid rgba(0,0,0,0.1); 21 transform: translateY(0.5em); 22} 23 24.btn svg { 25 transition: transform 0.5s; 26} 27 28.btn:hover svg { 29 transform: scale(0.9); 30 fill: #333333; 31} 32 33
5.2K views
5.2K views
Comments
1louloudev59 1. August at 10:45
1. August at 10:45
That's to incredible. Thank's for this share
Variations
2ashish-yadv
287 views
MIT License