Button by NguyenHaiNam24082000
#e8e8e8
1.background-button { 2 background: repeating-linear-gradient( 3 45deg, 4 #3c2209 0 20px, 5 #ff9c00 20px 40px 6 ); 7 width: 10em; 8 height: 10em; 9 -webkit-box-shadow: 15px 15px 50px 5px #5f5f5f; 10 box-shadow: 15px 15px 50px 5px #5f5f5f; 11 position: relative; 12 display: inline-block; 13 outline: 2px solid black; 14} 15 16.background-button::before { 17 content: ""; 18 display: inline-block; 19 position: absolute; 20 top: 15%; 21 left: 15%; 22 width: 70%; 23 height: 70%; 24 background: #a0b8c4; 25 border: 2px solid #3c2209; 26} 27 28.button { 29 background: #cc2a1f; 30 width: 65%; 31 height: 65%; 32 border-radius: 50%; 33 position: absolute; 34 top: 7.5%; 35 left: 18.25%; 36 color: white; 37 font-size: 1em; 38 font-weight: 900; 39 font-family: 'Courier New', Courier, monospace; 40 -webkit-box-shadow: 0 15px 0 0 #842a2a; 41 box-shadow: 0 15px 0 0 #842a2a; 42 -webkit-transition: all .5s ease; 43 transition: all .5s ease; 44 border: 2px solid black; 45} 46 47.button:active { 48 -webkit-box-shadow: 0 1px 1px 1px #8C0606; 49 box-shadow: 0 1px 1px 1px #8C0606; 50 top: 15%; 51} 52 53.background-button:has(.button:active) + .emergency { 54 display: block; 55 -webkit-transform: rotate(0deg) scaleY(1); 56 -ms-transform: rotate(0deg) scaleY(1); 57 transform: rotate(0deg) scaleY(1); 58 -webkit-animation: anims 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); 59 animation: anims 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); 60} 61 62@keyframes anims { 63 0% { 64 -webkit-transform: rotate(-30deg) scaleY(0.25); 65 transform: rotate(-30deg) scaleY(0.25); 66 } 67 68 100% { 69 -webkit-transform: rotate(0deg) scaleY(1); 70 transform: rotate(0deg) scaleY(1); 71 } 72} 73 74.emergency { 75 position: absolute; 76 display: none; 77} 78
3.6K views
3.6K views
MIT License