Button by catraco
This button was created for Button Frenzy: Tailwind Edition
#e8e8e8
HTML +TailwindCSS
1<button class="cursor-pointer relative p-3 border-2 border-white overflow-hidden bg-gradient-to-tr from-yellow-100 to-yellow-200 group duration-300 hover:-rotate-45 hover:opacity-75 hover:scale-125 active:scale-100 rounded-full drop-shadow-xl"> 2 <svg class="animate-pulse group-hover:scale-100 group-hover:rotate-45 scale-75 duration-500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="50px" height="50px" viewBox="0 0 512 512" xml:space="preserve"> 3 <path class="fill-slate-600" d="M356.766,8.17c-20.892,0-39.481,9.814-51.446,25.071L256,96.085l-21.787,64.596l122.553-21.787 c36.098,0,65.362-29.264,65.362-65.362S392.864,8.17,356.766,8.17z M356.766,106.213h-67.171l41.434-52.796 c6.266-7.988,15.644-12.566,25.737-12.566c18.02,0,32.681,14.661,32.681,32.681S374.786,106.213,356.766,106.213z"></path> 4 <path class="fill-slate-600" d="M206.68,33.241C194.715,17.984,176.126,8.17,155.234,8.17c-36.098,0-65.362,29.264-65.362,65.362 s29.264,65.362,65.362,65.362L256,160.681V96.085L206.68,33.241z M155.234,106.213c-18.02,0-32.681-14.661-32.681-32.681 s14.661-32.681,32.681-32.681c10.093,0,19.471,4.577,25.73,12.557l41.441,52.805H155.234z"></path> 5 <polygon class="fill-red-400" points="57.191,226.043 57.191,258.723 404.033,258.723 422.128,503.83 454.809,503.83 454.809,226.043 256,171.574"></polygon> 6 <polygon class="fill-red-300" points="57.191,258.723 57.191,503.83 223.319,503.83 256,471.149 288.681,503.83 422.128,503.83 422.128,258.723"></polygon> 7 <polygon class="fill-red-400" points="433.021,138.894 411.234,171.574 433.021,226.043 465.702,226.043 465.702,138.894"></polygon> 8 <rect x="46.298" y="138.894" class="fill-red-300" width="386.723" height="87.149"></rect> 9 <rect x="223.319" y="138.894" class="fill-slate-600" width="65.362" height="364.936"></rect> 10 <path class="fill-orange-200" d="M256,73.532c-18.05,0-32.681,14.631-32.681,32.681v32.681h65.362v-32.681 C288.681,88.163,274.05,73.532,256,73.532z"></path> 11 <path class="fill-none" d="M465.702,130.723h-62.79c16.688-13.491,27.385-34.111,27.385-57.191C430.298,32.986,397.312,0,356.766,0 c-22.725,0-43.821,10.278-57.873,28.196l-30.642,39.045c-3.869-1.219-7.984-1.879-12.251-1.879c-4.267,0-8.382,0.66-12.251,1.879 l-30.64-39.043C199.054,10.278,177.959,0,155.234,0c-40.546,0-73.532,32.986-73.532,73.532c0,23.08,10.698,43.701,27.385,57.191 h-62.79c-4.512,0-8.17,3.658-8.17,8.17v87.149c0,4.512,3.658,8.17,8.17,8.17h168.851V495.66H65.362V258.723 c0-4.512-3.658-8.17-8.17-8.17s-8.17,3.658-8.17,8.17V503.83c0,4.512,3.658,8.17,8.17,8.17h397.617c4.513,0,8.17-3.658,8.17-8.17 V234.213h2.723c4.513,0,8.17-3.658,8.17-8.17v-87.149C473.872,134.381,470.215,130.723,465.702,130.723z M457.532,147.064v70.809 H296.851v-70.809H457.532z M311.749,38.282c10.936-13.945,27.344-21.942,45.017-21.942c31.535,0,57.191,25.656,57.191,57.191 s-25.657,57.191-57.191,57.191h-59.915v-16.34h59.915c22.526,0,40.851-18.325,40.851-40.851s-18.325-40.851-40.851-40.851 c-12.619,0-24.344,5.72-32.165,15.692l-31.683,40.37c-2.452-5.161-5.959-9.725-10.236-13.424L311.749,38.282z M306.393,98.043 l31.065-39.583c4.704-5.998,11.742-9.438,19.308-9.438c13.515,0,24.511,10.995,24.511,24.511s-10.996,24.511-24.511,24.511H306.393z M98.043,73.532c0-31.536,25.656-57.191,57.191-57.191c17.673,0,34.081,7.997,45.019,21.944l29.064,37.035 c-4.277,3.698-7.783,8.263-10.236,13.424l-31.688-40.377c-7.818-9.969-19.54-15.686-32.159-15.686 c-22.526,0-40.851,18.325-40.851,40.851s18.325,40.851,40.851,40.851h67.193c0.15,0,0.297-0.014,0.446-0.023 c0.148,0.008,0.295,0.023,0.446,0.023c4.512,0,8.17-3.658,8.17-8.17c0-13.516,10.995-24.511,24.511-24.511 c13.515,0,24.511,10.995,24.511,24.511v24.511H155.233C123.698,130.723,98.043,105.068,98.043,73.532z M205.607,98.043h-50.373 c-13.516,0-24.511-10.995-24.511-24.511s10.995-24.511,24.511-24.511c7.567,0,14.602,3.437,19.302,9.431L205.607,98.043z M54.468,217.872v-70.809h160.681v70.809H54.468z M231.489,147.064h49.021V495.66h-49.021V147.064z M446.638,495.66H296.851V234.213 h149.787V495.66z"></path> 12 </svg> 13 <span class="bg-slate-200 h-[100%] w-[50%] absolute group-hover:w-0 left-0 top-0 duration-300 overflow-hidden flex items-center justify-end font-bold">OP</span> 14 <span class="bg-slate-200 h-[100%] w-[50%] absolute group-hover:w-0 right-0 top-0 duration-500 overflow-hidden flex items-center justify-start font-bold">EN</span> 15 </button>
704 views
704 views
MIT License