333 views
1button { 2 position: relative; 3 padding: 13px 35px; 4 background: #2e323c; 5 font-size: 17px; 6 font-weight: 900; 7 color: #FFF; 8 border: 3px solid #2e323c; 9 border-radius: 8px; 10 transition: all .3s ease-in-out; 11} 12 13p:nth-child(1) { 14 position: absolute; 15 top: 50%; 16 left: 50%; 17 transform: translate(-50%, -50%); 18 font-size: 17px; 19 font-weight: 900; 20 color: #FFF; 21 transition: all .3s ease-in-out; 22 z-index: -5; 23} 24 25p:nth-child(2) { 26 position: absolute; 27 top: 50%; 28 left: 50%; 29 transform: translate(-50%, -50%); 30 font-size: 17px; 31 font-weight: 900; 32 color: #FFF; 33 transition: all .3s ease-in-out; 34 z-index: -5; 35} 36 37p:nth-child(3) { 38 position: absolute; 39 top: 50%; 40 left: 50%; 41 transform: translate(-50%, -50%); 42 font-size: 17px; 43 font-weight: 900; 44 color: #FFF; 45 transition: all .3s ease-in-out; 46 z-index: -5; 47} 48 49p:nth-child(4) { 50 position: absolute; 51 top: 50%; 52 left: 50%; 53 transform: translate(-50%, -50%); 54 font-size: 17px; 55 font-weight: 900; 56 color: #FFF; 57 transition: all .3s ease-in-out; 58 z-index: -5; 59} 60 61button:hover { 62 background: transparent; 63 box-shadow: 0 0 15px #2e323c; 64} 65 66button:hover p:nth-child(1) { 67 top: 0%; 68 filter: drop-shadow(0 0 5px #FFFFFF); 69 z-index: 1; 70} 71 72button:hover p:nth-child(2) { 73 top: -50%; 74 filter: drop-shadow(0 0 5px #FFFFFF); 75 z-index: 1; 76} 77 78button:hover p:nth-child(3) { 79 top: 100%; 80 filter: drop-shadow(0 0 5px #FFFFFF); 81 z-index: 1; 82} 83 84button:hover p:nth-child(4) { 85 top: 150%; 86 filter: drop-shadow(0 0 5px #FFFFFF); 87 z-index: 1; 88} 89 90button:active p:nth-child(1) { 91 top: -20%; 92 filter: drop-shadow(0 0 5px #FFFFFF); 93 z-index: 1; 94} 95 96button:active p:nth-child(2) { 97 top: -90%; 98 filter: drop-shadow(0 0 5px #FFFFFF); 99 z-index: 1; 100} 101 102button:active p:nth-child(3) { 103 top: 120%; 104 filter: drop-shadow(0 0 5px #FFFFFF); 105 z-index: 1; 106} 107 108button:active p:nth-child(4) { 109 top: 190%; 110 filter: drop-shadow(0 0 5px #FFFFFF); 111 z-index: 1; 112}
MuhammadHasann
Muhammad Hasan
MIT License