Button by kennyotsu
#e8e8e8
1button { 2 appearance: none; 3 background-color: transparent; 4 border: 0.125em solid #1A1A1A; 5 border-radius: 0.9375em; 6 box-sizing: border-box; 7 color: #3B3B3B; 8 cursor: pointer; 9 display: inline-block; 10 font-family: Roobert, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 11 font-size: 16px; 12 font-weight: 600; 13 line-height: normal; 14 margin: 0; 15 min-height: 3.75em; 16 min-width: 0; 17 outline: none; 18 padding: 1em 2.3em; 19 text-align: center; 20 text-decoration: none; 21 transition: all 300ms cubic-bezier(.23, 1, 0.32, 1); 22 user-select: none; 23 -webkit-user-select: none; 24 touch-action: manipulation; 25 will-change: transform; 26} 27 28button:disabled { 29 background-color: rgb(199, 199, 199); 30 border-color: rgb(199, 199, 199); 31 color: gray; 32} 33 34button:disabled:hover { 35 background-color: rgb(230, 53, 53); 36 border-color: rgb(230, 53, 53); 37 color: white; 38 cursor: not-allowed; 39 transform: translateY(0px); 40 box-shadow: none; 41} 42 43button:hover { 44 color: #fff; 45 background-color: #1A1A1A; 46 box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; 47 transform: translateY(-2px); 48 transition: all 300ms cubic-bezier(.23, 1, 0.32, 1); 49} 50 51button:active { 52 box-shadow: none; 53 transform: translateY(0); 54} 55
611 views
Variation of abutton
MIT License