Button by JaydipPrajapati1910
#e8e8e8
1button { 2 appearance: button; 3 outline: none; 4 border: none; 5 border-radius: 16px; 6 box-sizing: border-box; 7 color: #222; 8 cursor: pointer; 9 display: inline-block; 10 font-size: 15px; 11 font-weight: 700; 12 letter-spacing: .8px; 13 line-height: 20px; 14 margin: 0; 15 outline: none; 16 overflow: visible; 17 padding: 13px 19px; 18 text-align: center; 19 text-transform: uppercase; 20 touch-action: manipulation; 21 transform: translateZ(0); 22 transition: filter .2s; 23 user-select: none; 24 -webkit-user-select: none; 25 vertical-align: middle; 26 white-space: nowrap; 27} 28 29button:after { 30 background-clip: padding-box; 31 box-shadow: inset 4px 4px 4px rgba(15, 15, 15, 0.315), 32 4px 4px 4px rgba(28, 28, 28, 0.13); 33 border: none; 34 border-radius: 16px; 35 outline: none; 36 bottom: -4px; 37 content: ""; 38 left: 0; 39 position: absolute; 40 right: 0; 41 top: 0; 42 z-index: -1; 43} 44 45button:main, button:focus { 46 user-select: auto; 47} 48 49button:hover:not(:disabled) { 50 filter: brightness(1.1); 51} 52 53button:disabled { 54 cursor: auto; 55} 56 57button:active:after { 58 border-width: 0 0 0px; 59} 60 61button:active { 62 padding-bottom: 10px; 63} 64 65
664 views
664 views
MIT License