Button by pamtbi
#e8e8e8
1.button { 2 display: grid; 3 grid-template-columns: repeat(6, 1fr); 4 grid-template-rows: repeat(4, 1fr); 5 width: 70px; 6 aspect-ratio: 3 / 2; 7 border: none; 8 border-radius: 0px; 9 margin: 0 auto; 10 padding: 0; 11 box-shadow: 0px 5px 0px 0px rgb(102,102,102); 12 transition: all .15s; 13 position: relative; 14 padding: 0 15} 16 17.button:hover { 18 transform: translateY(-1px); 19} 20 21.button:active { 22 box-shadow: none; 23 transform: translateY(5px); 24} 25 26.button__bg { 27 height: 100%; 28 aspect-ratio: 1 / 1; 29 align-self: stretch; 30} 31 32.button__bg-1, .button__bg-7, .button__bg-13, .button__bg-20, .button__bg-19, .button__bg-8, .button__bg-9, .button__bg-10, .button__bg-12 { 33 background: #494949; 34} 35 36.button__bg-6, .button__bg-4, .button__bg-5, .button__bg-14, .button__bg-15, .button__bg-16, .button__bg-21 { 37 background: #505050; 38} 39 40.button__bg-2, .button__bg-3, .button__bg-18, .button__bg-17 { 41 background: #5a5a5a; 42} 43 44.button__bg-11, .button__bg-22 { 45 background: #414141; 46} 47 48.button__bg-23, .button__bg-24 { 49 background: #535353; 50} 51 52.span { 53 position: absolute; 54 top: 50%; 55 left: 50%; 56 transform: translate(-50%, -50%); 57 font-size: 9px; 58 width: 100%; 59 color: rgb(223, 217, 189); 60 display: block; 61 text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18; 62} 63
474 views
474 views
MIT License