#212121
1button { 2 padding: 0 15px 0 15px; 3 font-size: 17px; 4 font-weight: 700; 5 text-shadow: 1px 1px 2.3px rgba(255,255,255, 0.8); 6 position: relative; 7 width: 150px; 8 height: 40px; 9 border-radius: 100% 9% 9% 100% / 0% 100% 100% 0%; 10 border: none; 11 background-image: linear-gradient( 12 180deg, #CDB373, #795E2B, 13 #AD8D53, #FFFAB7, #795D2F, 14 #614818, #BC9859, #876A35, 15 #736141); 16} 17 18button::before { 19 content: ''; 20 height: 44px; 21 width: 10px; 22 position: absolute; 23 top: -4.7%; 24 left: -5.9%; 25 border-radius: 100% 31% 28% 100% / 0% 100% 100% 0%; 26 background-image: linear-gradient( 27 180deg, #CDB373, #795E2B, 28 #AD8D53, #FFFAB7, #795D2F, 29 #614818, #BC9859, #876A35, 30 #736141); 31} 32 33.bullet { 34 height: 38px; 35 width: 60px; 36 position: absolute; 37 top: 3%; 38 left: 95%; 39 border-radius: 10% 100% 100% 10% / 10% 50% 50% 10%; 40 background-image: linear-gradient( 41 180deg, #512614, #A1623A, 42 #BA7447, #EDC38B, #B27449, 43 #DDAB77, #EAC4AE, #B67E4E, 44 #5B2D17, #44271C); 45 z-index: -1; 46} 47 48button:active .bullet { 49 left: 115%; 50 transition: all 0.2s; 51}
5K views
5K views
Comments
MIT License