3K views
1.container-button { 2 display: grid; 3 grid-template-columns: 1fr 1fr 1fr; 4 grid-template-rows: 1fr 1fr; 5 grid-template-areas: "bt-1 bt-2 bt-3" 6 "bt-4 bt-5 bt-6"; 7 position: relative; 8 perspective: 800; 9 padding: 0; 10 width: 135px; 11 height: 47px; 12 transition: all 0.3s ease-in-out; 13} 14 15.container-button:active { 16 transform: scale(0.95); 17} 18 19.hover { 20 position: absolute; 21 width: 100%; 22 height: 100%; 23 z-index: 200; 24} 25 26.bt-1 { 27 grid-area: bt-1; 28} 29 30.bt-2 { 31 grid-area: bt-2; 32} 33 34.bt-3 { 35 grid-area: bt-3; 36} 37 38.bt-4 { 39 grid-area: bt-4; 40} 41 42.bt-5 { 43 grid-area: bt-5; 44} 45 46.bt-6 { 47 grid-area: bt-6; 48} 49 50.bt-1:hover ~ button { 51 transform: rotateX(15deg) rotateY(-15deg) rotateZ(0deg); 52 box-shadow: -2px -2px #18181888; 53} 54 55.bt-1:hover ~ button::after { 56 animation: shake 0.5s ease-in-out 0.3s; 57 text-shadow: -2px -2px #18181888; 58} 59 60.bt-3:hover ~ button { 61 transform: rotateX(15deg) rotateY(15deg) rotateZ(0deg); 62 box-shadow: 2px -2px #18181888; 63} 64 65.bt-3:hover ~ button::after { 66 animation: shake 0.5s ease-in-out 0.3s; 67 text-shadow: 2px -2px #18181888; 68} 69 70.bt-4:hover ~ button { 71 transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg); 72 box-shadow: -2px 2px #18181888; 73} 74 75.bt-4:hover ~ button::after { 76 animation: shake 0.5s ease-in-out 0.3s; 77 text-shadow: -2px 2px #18181888; 78} 79 80.bt-6:hover ~ button { 81 transform: rotateX(-15deg) rotateY(15deg) rotateZ(0deg); 82 box-shadow: 2px 2px #18181888; 83} 84 85.bt-6:hover ~ button::after { 86 animation: shake 0.5s ease-in-out 0.3s; 87 text-shadow: 2px 2px #18181888; 88} 89 90.hover:hover ~ button::before { 91 background: transparent; 92} 93 94.hover:hover ~ button::after { 95 content: "Click"; 96 top: -150%; 97 transform: translate(-50%, 0); 98 font-size: 34px; 99 color: #f19c2b; 100} 101 102button { 103 position: absolute; 104 padding: 0; 105 width: 135px; 106 height: 47px; 107 background: transparent; 108 font-size: 17px; 109 font-weight: 900; 110 border: 3px solid #f39923; 111 border-radius: 12px; 112 transition: all 0.3s ease-in-out; 113} 114 115button::before { 116 content: ""; 117 position: absolute; 118 top: 50%; 119 left: 50%; 120 transform: translate(-50%, -50%); 121 width: 135px; 122 height: 47px; 123 background-color: #f5ae51; 124 border-radius: 12px; 125 transition: all 0.3s ease-in-out; 126 z-index: -1; 127} 128 129button::after { 130 content: "Hover"; 131 position: absolute; 132 top: 50%; 133 left: 50%; 134 transform: translate(-50%, -50%); 135 width: 135px; 136 height: 47px; 137 background-color: transparent; 138 font-size: 17px; 139 font-weight: 900; 140 line-height: 47px; 141 color: #ffffff; 142 border: none; 143 border-radius: 12px; 144 transition: all 0.3s ease-in-out; 145 z-index: 2; 146} 147 148@keyframes shake { 149 0% { 150 left: 45%; 151 } 152 153 25% { 154 left: 54%; 155 } 156 157 50% { 158 left: 48%; 159 } 160 161 75% { 162 left: 52%; 163 } 164 165 100% { 166 left: 50%; 167 } 168}
MuhammadHasann
Muhammad Hasan
MIT License