Button by elijahgummer
#e8e8e8
1.golden-button { 2 touch-action: manipulation; 3 display: inline-block; 4 outline: none; 5 font-family: inherit; 6 font-size: 1em; 7 box-sizing: border-box; 8 border: none; 9 border-radius: 0.3em; 10 height: 2.75em; 11 line-height: 2.5em; 12 text-transform: uppercase; 13 padding: 0 1em; 14 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4), 15 inset 0 -2px 5px 1px rgba(139, 66, 8, 1), 16 inset 0 -1px 1px 3px rgba(250, 227, 133, 1); 17 background-image: linear-gradient( 18 160deg, 19 #a54e07, 20 #b47e11, 21 #fef1a2, 22 #bc881b, 23 #a54e07 24 ); 25 border: 1px solid #a55d07; 26 color: rgb(120, 50, 5); 27 text-shadow: 0 2px 2px rgba(250, 227, 133, 1); 28 cursor: pointer; 29 transition: all 0.2s ease-in-out; 30 background-size: 100% 100%; 31 background-position: center; 32} 33 34.golden-button:focus, 35.golden-button:hover { 36 background-size: 150% 150%; 37 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23), 38 inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1); 39 border: 1px solid rgba(165, 93, 7, 0.6); 40 color: rgba(120, 50, 5, 0.8); 41} 42 43.golden-button:active { 44 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4), 45 inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1); 46} 47
1.6K views
1.6K views
MIT License