#e8e8e8
1button { 2 appearance: button; 3 background-color: #1899D6; 4 border: solid transparent; 5 border-radius: 16px; 6 border-width: 0 0 4px; 7 box-sizing: border-box; 8 color: #FFFFFF; 9 cursor: pointer; 10 display: inline-block; 11 font-size: 15px; 12 font-weight: 700; 13 letter-spacing: .8px; 14 line-height: 20px; 15 margin: 0; 16 outline: none; 17 overflow: visible; 18 padding: 13px 19px; 19 text-align: center; 20 text-transform: uppercase; 21 touch-action: manipulation; 22 transform: translateZ(0); 23 transition: filter .2s; 24 user-select: none; 25 -webkit-user-select: none; 26 vertical-align: middle; 27 white-space: nowrap; 28} 29 30button:after { 31 background-clip: padding-box; 32 background-color: #1CB0F6; 33 border: solid transparent; 34 border-radius: 16px; 35 border-width: 0 0 4px; 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}
Comments
Variations
1 MIT License