![](/build/_assets/logo-png-XGWSYHKJ.png)
Button by LeryLey
#e8e8e8
HTML +TailwindCSS
1<div 2 class="group grid grid-cols-3 gap-0 hover:gap-2 duration-500 relative shadow-sm" 3> 4 <h1 5 class="absolute z-10 group-hover:hidden duration-200 top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2" 6 > 7 <svg 8 viewBox="0 0 24 24" 9 fill="none" 10 height="24" 11 width="24" 12 xmlns="http://www.w3.org/2000/svg" 13 aria-hidden="true" 14 class="w-7 h-7 text-gray-800" 15 > 16 <path 17 d="M5 7h14M5 12h14M5 17h14" 18 stroke-width="2" 19 stroke-linecap="round" 20 stroke="currentColor" 21 ></path> 22 </svg> 23 </h1> 24 <a href="#"> 25 <svg 26 class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-[#cc39a4] backdrop-blur-md group-hover:shadow-xl rounded-tl-lg flex justify-center items-center w-full h-full text-[#cc39a4] hover:text-white duration-200" 27 aria-hidden="true" 28 xmlns="http://www.w3.org/2000/svg" 29 width="24" 30 height="24" 31 fill="none" 32 viewBox="0 0 24 24" 33 > 34 <path 35 class="opacity-0 group-hover:opacity-100 duration-200" 36 fill="currentColor" 37 fill-rule="evenodd" 38 d="M3 8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8Zm5-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H8Zm7.597 2.214a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2h-.01a1 1 0 0 1-1-1ZM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-5 3a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z" 39 clip-rule="evenodd" 40 ></path> 41 </svg> 42 </a> 43 <a href="#"> 44 <svg 45 viewBox="0 0 24 24" 46 fill="currentColor" 47 height="24" 48 width="24" 49 xmlns="http://www.w3.org/2000/svg" 50 aria-hidden="true" 51 class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-blue-500 backdrop-blur-md group-hover:shadow-xl flex justify-center items-center w-full h-full text-blue-500 hover:text-white duration-200" 52 > 53 <path 54 clip-rule="evenodd" 55 d="M22 5.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.343 8.343 0 0 1-2.605.981A4.13 4.13 0 0 0 15.85 4a4.068 4.068 0 0 0-4.1 4.038c0 .31.035.618.105.919A11.705 11.705 0 0 1 3.4 4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 6.1 13.635a4.192 4.192 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 2 18.184 11.732 11.732 0 0 0 8.291 20 11.502 11.502 0 0 0 19.964 8.5c0-.177 0-.349-.012-.523A8.143 8.143 0 0 0 22 5.892Z" 56 fill-rule="evenodd" 57 class="opacity-0 group-hover:opacity-100 duration-200" 58 ></path> 59 </svg> 60 </a> 61 <a href="#"> 62 <svg 63 viewBox="0 0 24 24" 64 fill="currentColor" 65 height="24" 66 width="24" 67 xmlns="http://www.w3.org/2000/svg" 68 aria-hidden="true" 69 class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-red-500 backdrop-blur-md group-hover:shadow-xl rounded-tr-lg flex justify-center items-center w-full h-full text-red-400 hover:text-white duration-200" 70 > 71 <path 72 clip-rule="evenodd" 73 d="M12 2a10 10 0 1 0 10 10A10.009 10.009 0 0 0 12 2Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.093 20.093 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM10 3.707a8.82 8.82 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.755 45.755 0 0 0 10 3.707Zm-6.358 6.555a8.57 8.57 0 0 1 4.73-5.981 53.99 53.99 0 0 1 3.168 4.941 32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.641 31.641 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM12 20.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 15.113 13a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z" 74 fill-rule="evenodd" 75 class="opacity-0 group-hover:opacity-100 duration-200" 76 ></path> 77 </svg> 78 </a> 79 <a href="#"> 80 <svg 81 viewBox="0 0 24 24" 82 fill="currentColor" 83 height="24" 84 width="24" 85 xmlns="http://www.w3.org/2000/svg" 86 aria-hidden="true" 87 class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-green-500 backdrop-blur-md group-hover:shadow-xl flex justify-center items-center w-full h-full text-green-500 hover:text-white duration-200" 88 > 89 <path 90 d="M7.978 4a2.553 2.553 0 0 0-1.926.877C4.233 6.7 3.699 8.751 4.153 10.814c.44 1.995 1.778 3.893 3.456 5.572 1.68 1.679 3.577 3.018 5.57 3.459 2.062.456 4.115-.073 5.94-1.885a2.556 2.556 0 0 0 .001-3.861l-1.21-1.21a2.689 2.689 0 0 0-3.802 0l-.617.618a.806.806 0 0 1-1.14 0l-1.854-1.855a.807.807 0 0 1 0-1.14l.618-.62a2.692 2.692 0 0 0 0-3.803l-1.21-1.211A2.555 2.555 0 0 0 7.978 4Z" 91 class="opacity-0 group-hover:opacity-100 duration-200" 92 ></path> 93 </svg> 94 </a> 95 <a href="#"> 96 <svg 97 viewBox="0 0 24 24" 98 fill="none" 99 height="24" 100 width="24" 101 xmlns="http://www.w3.org/2000/svg" 102 aria-hidden="true" 103 class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-black backdrop-blur-md group-hover:shadow-xl flex justify-center items-center w-full h-full text-black hover:text-white duration-200" 104 > 105 <path 106 d="M12 7.757v8.486M7.757 12h8.486M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" 107 stroke-width="2" 108 stroke-linejoin="round" 109 stroke-linecap="round" 110 stroke="currentColor" 111 class="opacity-0 group-hover:opacity-100 duration-200" 112 ></path> 113 </svg> 114 </a> 115 <a href="#"> 116 <svg 117 viewBox="0 0 24 24" 118 fill="currentColor" 119 height="24" 120 width="24" 121 xmlns="http://www.w3.org/2000/svg" 122 aria-hidden="true" 123 class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-blue-600 backdrop-blur-md group-hover:shadow-xl flex justify-center items-center w-full h-full text-blue-700 hover:text-white duration-200" 124 > 125 <path 126 d="M18.942 5.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.586 11.586 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3 17.392 17.392 0 0 0-2.868 11.662 15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.638 10.638 0 0 1-1.706-.83c.143-.106.283-.217.418-.331a11.664 11.664 0 0 0 10.118 0c.137.114.277.225.418.331-.544.328-1.116.606-1.71.832a12.58 12.58 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM8.678 14.813a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.929 1.929 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" 127 class="opacity-0 group-hover:opacity-100 duration-200" 128 ></path> 129 </svg> 130 </a> 131 <a href="#"> 132 <svg 133 viewBox="0 0 24 24" 134 fill="currentColor" 135 height="24" 136 width="24" 137 xmlns="http://www.w3.org/2000/svg" 138 aria-hidden="true" 139 class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-black backdrop-blur-md group-hover:shadow-xl rounded-bl-lg flex justify-center items-center w-full h-full text-black hover:text-white duration-200" 140 > 141 <path 142 clip-rule="evenodd" 143 d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z" 144 fill-rule="evenodd" 145 class="opacity-0 group-hover:opacity-100 duration-200" 146 ></path> 147 </svg> 148 </a> 149 <a href="#"> 150 <svg 151 viewBox="0 0 24 24" 152 fill="currentColor" 153 height="24" 154 width="24" 155 xmlns="http://www.w3.org/2000/svg" 156 aria-hidden="true" 157 class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-blue-600 backdrop-blur-md group-hover:shadow-xl flex justify-center items-center w-full h-full text-blue-600 hover:text-white duration-200" 158 > 159 <path 160 clip-rule="evenodd" 161 d="M13.135 6H15V3h-1.865a4.147 4.147 0 0 0-4.142 4.142V9H7v3h2v9.938h3V12h2.021l.592-3H12V6.591A.6.6 0 0 1 12.592 6h.543Z" 162 fill-rule="evenodd" 163 class="opacity-0 group-hover:opacity-100 duration-200" 164 ></path> 165 </svg> 166 </a> 167 <a href="#"> 168 <svg 169 viewBox="0 0 24 24" 170 fill="currentColor" 171 height="24" 172 width="24" 173 xmlns="http://www.w3.org/2000/svg" 174 aria-hidden="true" 175 class="group-hover:rounded-lg group-hover:opacity-1 p-3 bg-white/50 hover:bg-red-500 backdrop-blur-md group-hover:shadow-xl rounded-br-lg flex justify-center items-center w-full h-full text-red-500 hover:text-white duration-200" 176 > 177 <path 178 clip-rule="evenodd" 179 d="M21.7 8.037a4.26 4.26 0 0 0-.789-1.964 2.84 2.84 0 0 0-1.984-.839c-2.767-.2-6.926-.2-6.926-.2s-4.157 0-6.928.2a2.836 2.836 0 0 0-1.983.839 4.225 4.225 0 0 0-.79 1.965 30.146 30.146 0 0 0-.2 3.206v1.5a30.12 30.12 0 0 0 .2 3.206c.094.712.364 1.39.784 1.972.604.536 1.38.837 2.187.848 1.583.151 6.731.2 6.731.2s4.161 0 6.928-.2a2.844 2.844 0 0 0 1.985-.84 4.27 4.27 0 0 0 .787-1.965 30.12 30.12 0 0 0 .2-3.206v-1.516a30.672 30.672 0 0 0-.202-3.206Zm-11.692 6.554v-5.62l5.4 2.819-5.4 2.801Z" 180 fill-rule="evenodd" 181 class="opacity-0 group-hover:opacity-100 duration-200" 182 ></path> 183 </svg> 184 </a> 185</div> 186
246 views
246 views
MIT License