14K views
1button { 2 position: relative; 3 height: 50px; 4 padding: 0 30px; 5 border: 2px solid #000; 6 background: #e8e8e8; 7 user-select: none; 8 white-space: nowrap; 9 transition: all .05s linear; 10 font-family: inherit; 11} 12 13button:before, button:after { 14 content: ""; 15 position: absolute; 16 background: #e8e8e8; 17 transition: all .2s linear; 18} 19 20button:before { 21 width: calc(100% + 6px); 22 height: calc(100% - 16px); 23 top: 8px; 24 left: -3px; 25} 26 27button:after { 28 width: calc(100% - 16px); 29 height: calc(100% + 6px); 30 top: -3px; 31 left: 8px; 32} 33 34button:hover { 35 cursor: crosshair; 36} 37 38button:active { 39 transform: scale(0.95); 40} 41 42button:hover:before { 43 height: calc(100% - 32px); 44 top: 16px; 45} 46 47button:hover:after { 48 width: calc(100% - 32px); 49 left: 16px; 50} 51 52button span { 53 font-size: 15px; 54 z-index: 3; 55 position: relative; 56 font-weight: 600; 57}