Button by Praashoo7

This button was created for Button Frenzy: Tailwind Edition

#212121

HTML +TailwindCSS

1<div class="flex items-center justify-center rounded-[25px] pointer-events-none w-[20.5em] h-[17em] bg-[#87ceeb] hover:bg-[#171717] active:bg-black transition duration-500 ease-in-out overflow-hidden">
2  <div class="group">
3  <button class="relative z-[2] cursor-pointer top-[13em] left-[7em] pointer-events-auto w-[6em] h-[6em] rounded-full bg-gradient-to-br from-yellow-400 via-yellow-400 to-orange-500 hover:from-gray-400 hover:to-slate-200 transition duration-500 ease-in-out shadow-[0px_0px_100px_rgba(255,212,59,0.5),0px_0px_100px_rgba(255,102,0,0.5)] hover:shadow-[0px_0px_100px_rgba(233,233,233,0.5),0px_0px_100px_rgba(192,192,192,0.5);] hover:opacity-100 active:shadow-none">
4  <div class="relative opacity-0 left-[65%] top-[25%] w-[1.1em] h-[1.1em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"></div>
5  <div class="relative opacity-0 left-[80%] top-[25%] w-[.45em] h-[.45em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"></div>
6  <div class="relative opacity-0 left-[65%] top-[20%] w-[.8em] h-[.8em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"></div>
7  <svg class="relative w-[6em] h-[6em] bottom-[39%] opacity-0 shadow-none transition duration-500 ease-in-out group-active:opacity-100" width="141.11111mm" height="141.11111mm" viewBox="0 0 500.00001 500.00001" id="svg4770" version="1.1" xmlns="http://www.w3.org/2000/svg">
8      <defs id="defs4772"></defs>
9      <metadata id="metadata4775">
10      image/svg+xml</metadata>
11      <g id="layer1" transform="translate(92.857148,-1130.9336)">
12        <g transform="translate(264.28569,744.28568)" id="g5318">
13          <ellipse ry="250" rx="249.99994" style="fill:#178181;fill-opacity:1" cx="-107.1429" cy="636.64795" id="circle4657"></ellipse>
14          <path style="fill:#2aa846;fill-opacity:1" d="m 142.85704,636.64796 c 0,-50.15918 -14.76953,-96.86621 -40.20019,-136.01074 0,0 -14.261714,20.83398 -11.582027,34.22558 2.677734,13.39356 18.413077,14.41602 16.796867,24.24024 -1.61621,9.82422 -13.223625,-2.81153 -27.511708,23.0791 -14.287106,25.89258 -7.140623,61.61719 13.392575,64.29102 20.534173,2.67187 49.104483,-9.8252 49.104483,-9.8252 z" id="path4659"></path>
15          <path style="fill:#2aa846;fill-opacity:1" d="m -41.488621,395.3589 c 29.098626,7.89843 56.087877,20.92187 79.938457,38.03808 0,0 -28.9882739,-4.78125 -39.9697165,5.03711 -10.9804665,9.82129 -26.9951105,33.03907 -39.9697165,0 -12.972653,-33.03711 9.76e-4,-43.07519 9.76e-4,-43.07519 z" id="path4661"></path>
16          <path style="fill:#2aa846;fill-opacity:1" d="m -295.11258,471.82276 c 45.81835,-52.21191 113.04294,-85.1748 187.96968,-85.1748 0,0 -16.96093,10.26953 15.181635,27.67969 32.143547,17.41211 17.410152,25.44629 10.713865,30.80371 -6.695311,5.35742 -18.309566,-10.71387 -25.8955,-21.42676 -7.58691,-10.71582 -40.16796,-27.23144 -65.16991,-18.30078 -25.00097,8.93066 -46.42479,15.52734 -42.85643,23.83594 3.56738,8.30664 46.42479,-7.75879 62.49608,-6.87012 16.07128,0.89062 10.71386,10.70996 -4.46192,22.31836 -15.17773,11.6084 -16.96679,25.89258 -0.89453,34.82031 16.07031,8.93164 35.70898,9.8252 40.1787,4.46875 4.4668,-5.35742 -8.03613,-40.17871 22.322264,-25.00195 30.35839,15.17676 55.359361,24.1123 30.35839,46.43066 -25.001946,22.31641 -53.571274,47.3252 -54.465804,61.60547 -0.89453,14.28223 8.93164,25.89844 3.57422,26.78711 -5.35743,0.88867 -10.27442,-5.80176 -13.84375,-10.71582 -3.56738,-4.91113 -20.08886,-6.69434 -28.12402,-3.57227 -8.03613,3.12207 -23.21679,15.17676 -14.73242,26.78516 8.48535,11.61035 20.08301,6.24609 31.69336,11.60449 11.60839,5.35742 22.43358,25.74707 20.21093,30.35547 -2.22266,4.60645 -12.11816,-1.22656 -20.21093,-16.96191 -8.09473,-15.73731 -23.27637,-5.35742 -33.958,-8.03614 -10.68262,-2.67773 -18.71875,-4.46289 -29.43359,-23.21386 -10.71484,-18.74903 -32.89745,-23.9961 -41.9619,-34.82031 -25.96582,-31.00586 -24.1084,-54.46387 -29.46484,-65.17774 -5.35742,-10.7168 -19.22558,-28.22266 -19.22558,-28.22266 z" id="path4663"></path>
17          <path style="fill:#2aa846;fill-opacity:1" d="m -83.036462,640.22023 c 0,0 26.786126,2.67382 40.178701,14.28418 13.392575,11.60839 15.181637,16.07519 35.7158115,20.53808 20.5341745,4.46094 29.4648365,16.06543 16.0712852,38.38965 -13.3925749,22.32129 -37.5038967,58.03711 -49.1083867,68.75195 -11.603512,10.71582 -25.890618,19.64356 -31.248039,37.5 -5.356444,17.85449 -7.145506,28.5625 4.46289,35.71094 0,0 -6.246093,15.18066 -20.533198,-4.46289 -14.288082,-19.64551 -2.679687,-42.85645 0,-56.25 2.677733,-13.3916 9.819333,-53.56641 5.355467,-63.39258 -4.460936,-9.82324 -25.000969,-16.07519 -30.358389,-36.60742 -5.35742,-20.5332 4.01855,-60.49219 29.463858,-54.46191 z" id="path4665"></path>
18          <path style="opacity:0.36700056;fill:#414141;fill-opacity:1;enable-background:new" d="m -283.92019,459.87256 c 97.63181,-97.63379 255.919848,-97.63184 353.552638,0 97.632792,97.62988 97.632792,255.91992 9.7e-4,353.55175 0,0 113.425772,-149.99023 -47.16111,-310.57714 C -138.11554,342.25927 -283.92019,459.87256 -283.92019,459.87256 Z" id="path4667"></path>
19        </g>
20      </g>
21    </svg>
22  </button>
23  <div class="relative blur-[0.5px] opacity-80 top-[2.4em] left-[-1em] bg-[#f5f5f5] w-[50px] h-[50px] rounded-full shadow-[#f5f5f5_65px_-15px_0_-5px,#f5f5f5_25px_-25px,#f5f5f5_30px_10px,#f5f5f5_60px_15px_0_-10px,#f5f5f5_85px_5px_0_-5px] group-hover:opacity-0 group-active:opacity-0 transition duration-500 ease-in-out"></div>
24  <div class="relative blur-[0.5px] opacity-80 opacity-100 top-[6em] left-[13em] bg-[#f5f5f5] w-[50px] h-[50px] rounded-full shadow-[#f5f5f5_65px_-15px_0_-5px,#f5f5f5_25px_-25px,#f5f5f5_30px_10px,#f5f5f5_60px_15px_0_-10px,#f5f5f5_85px_5px_0_-5px] group-hover:opacity-0 group-active:opacity-0 transition duration-500 ease-in-out"></div>
25  <div class="relative bottom-[7em] left-[-0.1em] w-[20em] h-[17em] transition duration-500 ease-in-out opacity-0 group-hover:opacity-100 scale-[1.2] group-active:scale-[1]">
26    <div class="animate-pulse w-[2px] h-[2px] bg-white rounded-full shadow-[220px_118px_#fff,280px_176px_#fff,40px_50px_#fff,60px_180px_#fff,200px_250px_#fff]"></div>
27    <div class="animate-[pulse_1s_infinite_100ms] w-[2px] h-[2px] bg-white rounded-full shadow-[120px_170px_#fff,_180px_176px_#fff,_140px_45px_#fff,_10px_230px_#fff,_70px_120px_#fff,_170px_10px_#fff,_70px_70px_#fff]"></div>
28    <div class="animate-[pulse_1s_infinite_200ms] w-[2px] h-[2px] bg-white rounded-full shadow-[20px_130px_#fff,_300px_130px_#fff,_80px_20px_#fff,_190px_50px_#fff,_270px_20px_#fff,_240px_70px_#fff,_170px_210px_#fff]"></div>
29    <div class="animate-[pulse_1s_infinite_300ms] w-[2px] h-[2px] bg-white rounded-full shadow-[120px_230px_#fff,_110px_80px_#fff,_280px_80px_#fff,_280px_230px_#fff,_220px_190px_#fff,_100px_200px_#fff,_250px_150px_#fff]"></div>
30  </div>
31  </div>
32</div>

<div class="flex items-center justify-center rounded-[25px] pointer-events-none w-[20.5em] h-[17em] bg-[#87ceeb] hover:bg-[#171717] active:bg-black transition duration-500 ease-in-out overflow-hidden">
  <div class="group">
  <button class="relative z-[2] cursor-pointer top-[13em] left-[7em] pointer-events-auto w-[6em] h-[6em] rounded-full bg-gradient-to-br from-yellow-400 via-yellow-400 to-orange-500 hover:from-gray-400 hover:to-slate-200 transition duration-500 ease-in-out shadow-[0px_0px_100px_rgba(255,212,59,0.5),0px_0px_100px_rgba(255,102,0,0.5)] hover:shadow-[0px_0px_100px_rgba(233,233,233,0.5),0px_0px_100px_rgba(192,192,192,0.5);] hover:opacity-100 active:shadow-none">
  <div class="relative opacity-0 left-[65%] top-[25%] w-[1.1em] h-[1.1em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"></div>
  <div class="relative opacity-0 left-[80%] top-[25%] w-[.45em] h-[.45em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"></div>
  <div class="relative opacity-0 left-[65%] top-[20%] w-[.8em] h-[.8em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"></div>
  <svg class="relative w-[6em] h-[6em] bottom-[39%] opacity-0 shadow-none transition duration-500 ease-in-out group-active:opacity-100" width="141.11111mm" height="141.11111mm" viewBox="0 0 500.00001 500.00001" id="svg4770" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <defs id="defs4772"></defs>
      <metadata id="metadata4775">
      image/svg+xml</metadata>
      <g id="layer1" transform="translate(92.857148,-1130.9336)">
        <g transform="translate(264.28569,744.28568)" id="g5318">
          <ellipse ry="250" rx="249.99994" style="fill:#178181;fill-opacity:1" cx="-107.1429" cy="636.64795" id="circle4657"></ellipse>
          <path style="fill:#2aa846;fill-opacity:1" d="m 142.85704,636.64796 c 0,-50.15918 -14.76953,-96.86621 -40.20019,-136.01074 0,0 -14.261714,20.83398 -11.582027,34.22558 2.677734,13.39356 18.413077,14.41602 16.796867,24.24024 -1.61621,9.82422 -13.223625,-2.81153 -27.511708,23.0791 -14.287106,25.89258 -7.140623,61.61719 13.392575,64.29102 20.534173,2.67187 49.104483,-9.8252 49.104483,-9.8252 z" id="path4659"></path>
          <path style="fill:#2aa846;fill-opacity:1" d="m -41.488621,395.3589 c 29.098626,7.89843 56.087877,20.92187 79.938457,38.03808 0,0 -28.9882739,-4.78125 -39.9697165,5.03711 -10.9804665,9.82129 -26.9951105,33.03907 -39.9697165,0 -12.972653,-33.03711 9.76e-4,-43.07519 9.76e-4,-43.07519 z" id="path4661"></path>
          <path style="fill:#2aa846;fill-opacity:1" d="m -295.11258,471.82276 c 45.81835,-52.21191 113.04294,-85.1748 187.96968,-85.1748 0,0 -16.96093,10.26953 15.181635,27.67969 32.143547,17.41211 17.410152,25.44629 10.713865,30.80371 -6.695311,5.35742 -18.309566,-10.71387 -25.8955,-21.42676 -7.58691,-10.71582 -40.16796,-27.23144 -65.16991,-18.30078 -25.00097,8.93066 -46.42479,15.52734 -42.85643,23.83594 3.56738,8.30664 46.42479,-7.75879 62.49608,-6.87012 16.07128,0.89062 10.71386,10.70996 -4.46192,22.31836 -15.17773,11.6084 -16.96679,25.89258 -0.89453,34.82031 16.07031,8.93164 35.70898,9.8252 40.1787,4.46875 4.4668,-5.35742 -8.03613,-40.17871 22.322264,-25.00195 30.35839,15.17676 55.359361,24.1123 30.35839,46.43066 -25.001946,22.31641 -53.571274,47.3252 -54.465804,61.60547 -0.89453,14.28223 8.93164,25.89844 3.57422,26.78711 -5.35743,0.88867 -10.27442,-5.80176 -13.84375,-10.71582 -3.56738,-4.91113 -20.08886,-6.69434 -28.12402,-3.57227 -8.03613,3.12207 -23.21679,15.17676 -14.73242,26.78516 8.48535,11.61035 20.08301,6.24609 31.69336,11.60449 11.60839,5.35742 22.43358,25.74707 20.21093,30.35547 -2.22266,4.60645 -12.11816,-1.22656 -20.21093,-16.96191 -8.09473,-15.73731 -23.27637,-5.35742 -33.958,-8.03614 -10.68262,-2.67773 -18.71875,-4.46289 -29.43359,-23.21386 -10.71484,-18.74903 -32.89745,-23.9961 -41.9619,-34.82031 -25.96582,-31.00586 -24.1084,-54.46387 -29.46484,-65.17774 -5.35742,-10.7168 -19.22558,-28.22266 -19.22558,-28.22266 z" id="path4663"></path>
          <path style="fill:#2aa846;fill-opacity:1" d="m -83.036462,640.22023 c 0,0 26.786126,2.67382 40.178701,14.28418 13.392575,11.60839 15.181637,16.07519 35.7158115,20.53808 20.5341745,4.46094 29.4648365,16.06543 16.0712852,38.38965 -13.3925749,22.32129 -37.5038967,58.03711 -49.1083867,68.75195 -11.603512,10.71582 -25.890618,19.64356 -31.248039,37.5 -5.356444,17.85449 -7.145506,28.5625 4.46289,35.71094 0,0 -6.246093,15.18066 -20.533198,-4.46289 -14.288082,-19.64551 -2.679687,-42.85645 0,-56.25 2.677733,-13.3916 9.819333,-53.56641 5.355467,-63.39258 -4.460936,-9.82324 -25.000969,-16.07519 -30.358389,-36.60742 -5.35742,-20.5332 4.01855,-60.49219 29.463858,-54.46191 z" id="path4665"></path>
          <path style="opacity:0.36700056;fill:#414141;fill-opacity:1;enable-background:new" d="m -283.92019,459.87256 c 97.63181,-97.63379 255.919848,-97.63184 353.552638,0 97.632792,97.62988 97.632792,255.91992 9.7e-4,353.55175 0,0 113.425772,-149.99023 -47.16111,-310.57714 C -138.11554,342.25927 -283.92019,459.87256 -283.92019,459.87256 Z" id="path4667"></path>
        </g>
      </g>
    </svg>
  </button>
  <div class="relative blur-[0.5px] opacity-80 top-[2.4em] left-[-1em] bg-[#f5f5f5] w-[50px] h-[50px] rounded-full shadow-[#f5f5f5_65px_-15px_0_-5px,#f5f5f5_25px_-25px,#f5f5f5_30px_10px,#f5f5f5_60px_15px_0_-10px,#f5f5f5_85px_5px_0_-5px] group-hover:opacity-0 group-active:opacity-0 transition duration-500 ease-in-out"></div>
  <div class="relative blur-[0.5px] opacity-80 opacity-100 top-[6em] left-[13em] bg-[#f5f5f5] w-[50px] h-[50px] rounded-full shadow-[#f5f5f5_65px_-15px_0_-5px,#f5f5f5_25px_-25px,#f5f5f5_30px_10px,#f5f5f5_60px_15px_0_-10px,#f5f5f5_85px_5px_0_-5px] group-hover:opacity-0 group-active:opacity-0 transition duration-500 ease-in-out"></div>
  <div class="relative bottom-[7em] left-[-0.1em] w-[20em] h-[17em] transition duration-500 ease-in-out opacity-0 group-hover:opacity-100 scale-[1.2] group-active:scale-[1]">
    <div class="animate-pulse w-[2px] h-[2px] bg-white rounded-full shadow-[220px_118px_#fff,280px_176px_#fff,40px_50px_#fff,60px_180px_#fff,200px_250px_#fff]"></div>
    <div class="animate-[pulse_1s_infinite_100ms] w-[2px] h-[2px] bg-white rounded-full shadow-[120px_170px_#fff,_180px_176px_#fff,_140px_45px_#fff,_10px_230px_#fff,_70px_120px_#fff,_170px_10px_#fff,_70px_70px_#fff]"></div>
    <div class="animate-[pulse_1s_infinite_200ms] w-[2px] h-[2px] bg-white rounded-full shadow-[20px_130px_#fff,_300px_130px_#fff,_80px_20px_#fff,_190px_50px_#fff,_270px_20px_#fff,_240px_70px_#fff,_170px_210px_#fff]"></div>
    <div class="animate-[pulse_1s_infinite_300ms] w-[2px] h-[2px] bg-white rounded-full shadow-[120px_230px_#fff,_110px_80px_#fff,_280px_80px_#fff,_280px_230px_#fff,_220px_190px_#fff,_100px_200px_#fff,_250px_150px_#fff]"></div>
  </div>
  </div>
</div>

4K views

Copy to Figma

4K views

Comments

ngothanhthien 27. December 2023. at 9:28

27. December 2023. at 9:28

Really good!

SteveBloX

Pro

27. July 2023. at 11:41

I like this button but is it very functional? I don't think it could be used in a website

Praashoo7

Pro

1. October 2023. at 20:23

@SteveBloX I understand your concern. But it can be used on a website. You can see a nice working example here : https://cdn.discordapp.com/attachments/1071161876295209017/1134097929444020235/ezgif-3-6456278c55.gif. Courtesy of one of our moderators, @kennyotsu.

No variations yet

MIT License

Copyright - 2024 Praashoo7 (Prashant) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.