Button by Gautammsharma
#e8e8e8
1.comic-button { 2 background-color: #ffed4b; 3 border: none; 4 color: #000; 5 font-size: 1.2rem; 6 font-weight: bold; 7 padding: 0.5rem 1rem; 8 text-transform: uppercase; 9 text-shadow: 1px 1px 0 #fff; 10 box-shadow: 4px 4px 0 #000; 11 position: relative; 12 overflow: hidden; 13 transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; 14} 15 16.comic-button:before { 17 content: ""; 18 position: absolute; 19 top: -20%; 20 left: -20%; 21 width: 150%; 22 height: 150%; 23 background-color: rgba(0,0,0,0.2); 24 transform: rotate(45deg); 25 z-index: -1; 26 opacity: 0; 27 transition: opacity 0.2s ease-in-out; 28} 29 30.comic-button:hover { 31 transform: translate(2px, 2px); 32 box-shadow: 6px 6px 0 #000; 33} 34 35.comic-button:hover:before { 36 opacity: 1; 37} 38 39.comic-button:active { 40 transform: translate(0px, 0px); 41 box-shadow: 4px 4px 0 #000; 42} 43 44.comic-button:active:before { 45 opacity: 0; 46} 47
513 views
513 views
MIT License