按钮动画

下载代码

html

css

分享到微信朋友圈

html

<div class="button">
  <svg
       width="600"
       height="180"
       viewBox="0 0 600 180">
    <g
       transform="translate(0,120)">
      <path
            d="m 375,-30.000188 v 8.509766 c 1.6044,5.478475 6.42773,-1.39391 6.42773,4.705078 0,6.098988 -4.88359,-0.01548 -6.42773,5.24414 v 11.541016 h 10 c 8.31,0 15,-6.69 15,-15 v -15 h -6.25 c -5.67886,2.634117 0.43587,8.023127 -4.98828,7.828125 -5.42415,-0.195002 1.44029,-5.875963 -4.22852,-7.828125 z" />
      <path
            d="m 225,-30.000188 v 10.892578 c -2.46388,4.525727 -7.5,-3.426384 -7.5,3.90625 0,7.332634 4.99475,-0.805714 7.5,3.773438 v 11.427734 h 25 c 0,0 0,-3.610985 0,-7.5 -2.49893,-4.328273 -8.33376,1.357257 -8.33376,-4.722081 0,-6.079338 5.5659,-0.270329 8.33376,-3.964466 0,-4.319137 0,-13.813453 0,-13.813453 h -9.02792 c -3.77153,2.177495 3.5289,7.828682 -3.47208,7.828682 -7.00098,0 0.82015,-5.605718 -3.03014,-7.828682 z" />
      <path
            d="m 275,-60.000188 v 12.746094 c -0.77066,4.741572 -6.73069,-1.853206 -6.69336,4.021484 0.0373,5.87469 5.68721,-0.984412 6.69336,3.898438 v 9.433635 h 8.125 c 5.27129,-1.429953 -2.40959,-7.052754 4.375,-7.052734 6.78459,2e-5 -1.14721,5.651243 4.375,7.052734 h 8.125 v -10.953167 c -1.47073,-3.83938 -7.67773,3.437185 -7.67773,-3.074218 0,-6.511405 6.13185,0.955905 7.67773,-2.792969 v -13.279297 z" />
      <path
            d="m 350,-60.000188 v 30.099651 h 8.39258 c 4.6455,-1.467397 -0.92724,-8.333984 4.55469,-8.333984 5.48193,0 -0.53507,6.638685 4.46289,8.333984 h 7.58984 v -9.814495 c -0.76195,-6.368365 -6.81836,0.727136 -6.81836,-4.675781 0,-5.402917 5.58624,1.611558 6.81836,-4.46875 v -11.140625 z" />
      <path
            d="m 250,-30.000188 v 13.8125 c -2.76786,3.694137 -8.33398,-2.114494 -8.33398,3.964844 0,6.079338 5.83505,0.394383 8.33398,4.722656 v 7.5 h 25 v -10.277344 c 1.55983,-5.763663 6.81836,1.84526 6.81836,-4.847656 0,-6.692916 -5.13462,1.244747 -6.81836,-4.34375 v -10.53125 h -9.19727 c -3.61879,1.395211 4.15131,7.353516 -3.48046,7.353516 -7.63178,0 0.7619,-5.902579 -3.30469,-7.353516 z" />
      <path
            d="m 250,-60.000188 v 9.015625 c 1.36643,4.762933 7.99796,-2.651645 8.08203,4.46875 0.0841,7.120395 -6.95226,-0.835084 -8.08203,4.722656 v 11.89262 h 9.01758 c 4.06659,1.450937 -4.32904,7.353516 3.30273,7.353516 7.63178,0 -0.13637,-5.958305 3.48242,-7.353516 h 9.19727 v -9.433635 c -1.00615,-4.88285 -6.65603,1.976252 -6.69336,-3.898438 -0.0373,-5.87469 5.9227,0.720088 6.69336,-4.021484 v -12.746094 z" />
      <path
            d="m 325,-30.000188 v 30 h 25 v -7.5 c -1.88041,-4.791586 -6.78516,1.03309 -6.78516,-4.285156 0,-5.318247 4.87438,0.720757 6.78516,-5.53711 v -12.677734 h -8.26953 c -5.06247,1.356485 1.61547,7.449219 -4.23047,7.449219 -5.84594,0 0.60376,-6.289435 -3.72461,-7.449219 z" />
      <path
            d="m 350,-30.000188 h 8.39286 c 4.6455,-1.467397 -0.92836,-8.333758 4.55357,-8.333758 5.48193,0 -0.53368,6.638459 4.46428,8.333758 h 7.58929 v 8.510153 c 1.6044,5.478475 6.42857,-1.394855 6.42857,4.704133 0,6.098988 -4.88443,-0.01452 -6.42857,5.245104 v 11.54061 h -25 v -7.5 c -1.88041,-4.791586 -6.78571,1.032532 -6.78571,-4.285714 0,-5.318247 4.87493,0.720613 6.78571,-5.537254 z" />
      <path
            d="m 212.85742,-38.215032 c -7.36748,0 0.4445,5.724605 -3.19726,8.214844 h -9.66016 v 15 c 0,8.31 6.69,15 15,15 h 10 v -11.427734 c -2.50525,-4.579152 -7.5,3.559196 -7.5,-3.773438 0,-7.332634 5.03612,0.619477 7.5,-3.90625 v -10.892578 h -9.1543 c -2.89815,-2.898148 4.37921,-8.214844 -2.98828,-8.214844 z" />
      <path
            d="m 215,-60.000188 c -8.31,0 -15,6.69 -15,15 v 15.099651 h 9.66016 c 3.64176,-2.490239 -4.17023,-8.214844 3.19726,-8.214844 7.36749,0 0.0901,5.316696 2.98828,8.214844 h 9.1543 v -8.988611 c 1.25268,-3.749198 7.57614,2.295041 7.57614,-3.964466 0,-6.259507 -5.70038,0.396838 -7.57614,-3.964466 v -13.182108 z" />
      <path
            d="m 225,-60.000188 v 13.181641 c 1.87576,4.361304 7.57617,-2.294664 7.57617,3.964843 0,6.259507 -6.32349,0.215646 -7.57617,3.964844 v 8.988323 h 9.4707 c 3.85029,2.222964 -3.97168,7.828125 3.0293,7.828125 7.00098,0 -0.29888,-5.65063 3.47266,-7.828125 h 9.02734 v -11.892799 c 1.12977,-5.55774 8.16529,2.398314 8.08122,-4.722081 -0.0841,-7.120395 -6.71479,0.293391 -8.08122,-4.469542 v -9.015229 z" />
      <path
            d="m 300,-60.000188 h 25 v 12.045686 c 1.12955,4.215551 8.60733,-2.045654 8.57143,3.711928 -0.0359,5.757582 -7.35648,-0.948602 -8.57143,3.585659 v 10.756378 h -9.28046 c -2.32616,1.424935 2.92582,6.313453 -3.21954,6.313453 -6.14536,0 -0.76871,-4.863798 -3.09327,-6.313453 h -9.40673 v -10.952896 c -1.47073,-3.83938 -7.67857,3.436077 -7.67857,-3.075326 0,-6.511404 6.13269,0.956724 7.67857,-2.79215 z" />
      <path
            d="m 275,-30.000188 v 10.53125 c 0.42093,1.397124 1.05724,1.9494 1.77539,2.095703 0.71815,0.14612 1.51856,-0.113027 2.26563,-0.337891 0.74706,-0.224863 1.44154,-0.415031 1.94921,-0.130859 0.0638,0.03574 0.12398,0.07924 0.18164,0.130859 0.0574,0.05123 0.11137,0.109099 0.16211,0.177735 0.10148,0.137234 0.18793,0.310169 0.25977,0.527344 2.1e-4,6.45e-4 -2.1e-4,0.0013 0,0.002 0.0716,0.216865 0.12809,0.47698 0.16602,0.787109 9e-5,7.36e-4 -9e-5,0.0012 0,0.002 0.0379,0.31049 0.0586,0.670331 0.0586,1.087891 v 0.002 c -8e-5,0.417364 -0.0198,0.77901 -0.0586,1.091797 -0.0389,0.314064 -0.0964,0.578519 -0.16993,0.800781 -0.0734,0.221894 -0.16401,0.400969 -0.26757,0.544922 -0.10379,0.144536 -0.2199,0.252324 -0.34961,0.332031 -0.25868,0.158956 -0.56486,0.203266 -0.90039,0.185547 -1.50992,-0.07973 -3.6205,-1.401671 -4.73829,0.960938 -2.6e-4,5.63e-4 2.7e-4,0.0014 0,0.002 -0.12392,0.262193 -0.23667,0.570128 -0.33398,0.929687 v 10.277344 h 25 v -10.277344 c 0.86503,-5.556904 9.5957,3.878585 9.5957,-4.722656 0,-8.601241 -8.68248,1.145243 -9.5957,-3.964844 v -11.035156 c 0,0 -5.10634,-4.7e-5 -8.125,-4.7e-5 -5.52221,-1.401491 2.40959,-7.053598 -4.375,-7.053618 -6.78459,-2e-5 0.89629,5.623571 -4.375,7.053524 -3.28496,0 -8.125,-4.7e-5 -8.125,-4.7e-5 z" />
      <path
            d="m 300,-30.000188 v 11.035156 c 0.91322,5.110087 9.5957,-4.636397 9.5957,3.964844 0,8.601241 -8.73067,-0.834248 -9.5957,4.722656 v 10.277344 h 25 v -7.5 c 0.97206,-5.55425 6.74969,0.923392 6.81836,-4.46875 0.0687,-5.392142 -6.0405,1.234486 -6.81836,-4.722656 v -13.308594 h -9.28125 c -2.32616,1.424935 2.92661,6.3125 -3.21875,6.3125 -6.14536,0 -0.76919,-4.862845 -3.09375,-6.3125 z" />
      <path
            d="m 325,-60.000188 v 12.044922 c 1.12955,4.215551 8.60817,-2.044691 8.57227,3.71289 -0.0359,5.757582 -7.35732,-0.948323 -8.57227,3.585938 v 10.755901 h 8.77538 c 4.32837,1.159784 -2.12132,7.449875 3.72462,7.449875 5.84594,0 -0.83278,-6.09339 4.22969,-7.449875 h 8.27031 v -10.069013 c 1.55171,-5.791043 5.89286,0.782336 5.89286,-4.904369 0,-5.686705 -4.42652,1.481471 -5.89286,-4.673495 v -10.452774 z" />
      <path
            d="m 375,-60.000188 v 11.140139 c -1.23212,6.080308 -6.81853,-0.933375 -6.81853,4.469542 0,5.402917 6.05658,-1.692242 6.81853,4.676123 v 9.813847 h 9.533 c 5.66881,1.952162 -1.19446,7.63368 4.22969,7.828682 5.42415,0.195002 -0.69155,-5.194565 4.98731,-7.828682 h 6.25 v -15.099651 c 0,-8.31 -6.69,-15 -15,-15 z" />
    </g>
  </svg>
  <div class="submit">Puzzle</div>
</div>

<div class="button">
  <svg
       width="600"
       height="180"
       viewBox="0 0 600 180">
    <g>
      <path
            d="M 214.75 60.25 C 206.44 60.25 199.75 66.94 199.75 75.25 L 199.75 85.25 L 224.75 60.25 L 214.75 60.25 z " />
      <path
            d="M 224.75 60.25 L 199.75 85.25 L 199.75 105.25 C 199.75 108.11697 200.56093 110.78156 201.94531 113.05469 L 254.75 60.25 L 224.75 60.25 z " />
      <path
            d="M 254.75 60.25 L 201.94531 113.05469 C 204.5736 117.37029 209.30697 120.25 214.75 120.25 L 224.75 120.25 L 284.75 60.25 L 254.75 60.25 z " />
      <path
            d="M 284.75 60.25 L 224.75 120.25 L 254.75 120.25 L 314.75 60.25 L 284.75 60.25 z " />
      <path
            d="M 314.75 60.25 L 254.75 120.25 L 284.75 120.25 L 344.75 60.25 L 314.75 60.25 z " />
      <path
            d="M 344.75 60.25 L 284.75 120.25 L 314.75 120.25 L 374.75 60.25 L 344.75 60.25 z " />
      <path
            d="M 374.75 60.25 L 314.75 120.25 L 344.75 120.25 L 397.55469 67.445312 C 394.9264 63.129713 390.19303 60.25 384.75 60.25 L 374.75 60.25 z " />
      <path
            d="M 397.55469 67.445312 L 344.75 120.25 L 374.75 120.25 L 399.75 95.25 L 399.75 75.25 C 399.75 72.38303 398.93907 69.718439 397.55469 67.445312 z " />
      <path
            d="M 399.75 95.25 L 374.75 120.25 L 384.75 120.25 C 393.06 120.25 399.75 113.56 399.75 105.25 L 399.75 95.25 z " />
    </g>
  </svg>
  <div class="submit">Blinds</div>
</div>

<div class="button">
  <svg
       width="600"
       height="180"
       viewBox="0 0 600 180">
    <g>
      <path
            d="M 350.44727 60.25 L 342.98242 70.203125 L 357.98242 90.203125 L 342.98242 110.20312 L 350.51758 120.25 L 360.51758 120.25 L 352.98242 110.20312 L 367.98242 90.203125 L 352.98242 70.203125 L 360.44727 60.25 L 350.44727 60.25 z " />
      <path
            d="M 199.75 79.226562 L 199.75 101.17969 L 207.98242 90.203125 L 199.75 79.226562 z " />
      <path
            d="M 209.81641 61.091797 C 203.94809 63.125368 199.75 68.672569 199.75 75.25 L 199.75 79.226562 L 207.98242 90.203125 L 199.75 101.17969 L 199.75 105.25 C 199.75 111.86439 203.9939 117.44027 209.91406 119.44531 L 202.98242 110.20312 L 217.98242 90.203125 L 202.98242 70.203125 L 209.81641 61.091797 z " />
      <path
            d="M 214.75 60.25 C 213.01743 60.25 211.36219 60.556132 209.81641 61.091797 L 202.98242 70.203125 L 217.98242 90.203125 L 202.98242 110.20312 L 209.91406 119.44531 C 211.43171 119.95931 213.05439 120.25 214.75 120.25 L 220.51758 120.25 L 212.98242 110.20312 L 227.98242 90.203125 L 212.98242 70.203125 L 220.44727 60.25 L 214.75 60.25 z " />
      <path
            d="M 220.44727 60.25 L 212.98242 70.203125 L 227.98242 90.203125 L 212.98242 110.20312 L 220.51758 120.25 L 230.51758 120.25 L 222.98242 110.20312 L 237.98242 90.203125 L 222.98242 70.203125 L 230.44727 60.25 L 220.44727 60.25 z " />
      <path
            d="M 230.44727 60.25 L 222.98242 70.203125 L 237.98242 90.203125 L 222.98242 110.20312 L 230.51758 120.25 L 240.51758 120.25 L 232.98242 110.20312 L 247.98242 90.203125 L 232.98242 70.203125 L 240.44727 60.25 L 230.44727 60.25 z " />
      <path
            d="M 240.44727 60.25 L 232.98242 70.203125 L 247.98242 90.203125 L 232.98242 110.20312 L 240.51758 120.25 L 250.51758 120.25 L 242.98242 110.20312 L 257.98242 90.203125 L 242.98242 70.203125 L 250.44727 60.25 L 240.44727 60.25 z " />
      <path
            d="M 250.44727 60.25 L 242.98242 70.203125 L 257.98242 90.203125 L 242.98242 110.20312 L 250.51758 120.25 L 260.51758 120.25 L 252.98242 110.20312 L 267.98242 90.203125 L 252.98242 70.203125 L 260.44727 60.25 L 250.44727 60.25 z " />
      <path
            d="M 260.44727 60.25 L 252.98242 70.203125 L 267.98242 90.203125 L 252.98242 110.20312 L 260.51758 120.25 L 270.51758 120.25 L 262.98242 110.20312 L 277.98242 90.203125 L 262.98242 70.203125 L 270.44727 60.25 L 260.44727 60.25 z " />
      <path
            d="M 270.44727 60.25 L 262.98242 70.203125 L 277.98242 90.203125 L 262.98242 110.20312 L 270.51758 120.25 L 280.51758 120.25 L 272.98242 110.20312 L 287.98242 90.203125 L 272.98242 70.203125 L 280.44727 60.25 L 270.44727 60.25 z " />
      <path
            d="M 280.44727 60.25 L 272.98242 70.203125 L 287.98242 90.203125 L 272.98242 110.20312 L 280.51758 120.25 L 290.51758 120.25 L 282.98242 110.20312 L 297.98242 90.203125 L 282.98242 70.203125 L 290.44727 60.25 L 280.44727 60.25 z " />
      <path
            d="M 290.44727 60.25 L 282.98242 70.203125 L 297.98242 90.203125 L 282.98242 110.20312 L 290.51758 120.25 L 300.51758 120.25 L 292.98242 110.20312 L 307.98242 90.203125 L 292.98242 70.203125 L 300.44727 60.25 L 290.44727 60.25 z " />
      <path
            d="M 300.44727 60.25 L 292.98242 70.203125 L 307.98242 90.203125 L 292.98242 110.20312 L 300.51758 120.25 L 310.51758 120.25 L 302.98242 110.20312 L 317.98242 90.203125 L 302.98242 70.203125 L 310.44727 60.25 L 300.44727 60.25 z " />
      <path
            d="M 310.44727 60.25 L 302.98242 70.203125 L 317.98242 90.203125 L 302.98242 110.20312 L 310.51758 120.25 L 320.51758 120.25 L 312.98242 110.20312 L 327.98242 90.203125 L 312.98242 70.203125 L 320.44727 60.25 L 310.44727 60.25 z " />
      <path
            d="M 320.44727 60.25 L 312.98242 70.203125 L 327.98242 90.203125 L 312.98242 110.20312 L 320.51758 120.25 L 330.51758 120.25 L 322.98242 110.20312 L 337.98242 90.203125 L 322.98242 70.203125 L 330.44727 60.25 L 320.44727 60.25 z " />
      <path
            d="M 330.44727 60.25 L 322.98242 70.203125 L 337.98242 90.203125 L 322.98242 110.20312 L 330.51758 120.25 L 340.51758 120.25 L 332.98242 110.20312 L 347.98242 90.203125 L 332.98242 70.203125 L 340.44727 60.25 L 330.44727 60.25 z " />
      <path
            d="M 340.44727 60.25 L 332.98242 70.203125 L 347.98242 90.203125 L 332.98242 110.20312 L 340.51758 120.25 L 350.51758 120.25 L 342.98242 110.20312 L 357.98242 90.203125 L 342.98242 70.203125 L 350.44727 60.25 L 340.44727 60.25 z " />
      <path
            d="M 360.44727 60.25 L 352.98242 70.203125 L 367.98242 90.203125 L 352.98242 110.20312 L 360.51758 120.25 L 370.51758 120.25 L 362.98242 110.20312 L 377.98242 90.203125 L 362.98242 70.203125 L 370.44727 60.25 L 360.44727 60.25 z " />
      <path
            d="M 370.44727 60.25 L 362.98242 70.203125 L 377.98242 90.203125 L 362.98242 110.20312 L 370.51758 120.25 L 380.51758 120.25 L 372.98242 110.20312 L 387.98242 90.203125 L 372.98242 70.203125 L 380.44727 60.25 L 370.44727 60.25 z " />
      <path
            d="M 380.44727 60.25 L 372.98242 70.203125 L 387.98242 90.203125 L 372.98242 110.20312 L 380.51758 120.25 L 384.75 120.25 C 386.54266 120.25 388.25276 119.92333 389.84375 119.35156 L 382.98242 110.20312 L 397.98242 90.203125 L 382.98242 70.203125 L 389.78711 61.128906 C 388.21199 60.569994 386.52147 60.25 384.75 60.25 L 380.44727 60.25 z " />
      <path
            d="M 389.78711 61.128906 L 382.98242 70.203125 L 397.98242 90.203125 L 382.98242 110.20312 L 389.84375 119.35156 C 392.42764 118.42297 394.68316 116.82074 396.38281 114.73633 L 392.98242 110.20312 L 399.75 101.17969 L 399.75 79.226562 L 392.98242 70.203125 L 396.34766 65.716797 C 394.63998 63.639157 392.3759 62.047505 389.78711 61.128906 z " />
      <path
            d="M 396.34766 65.716797 L 392.98242 70.203125 L 399.75 79.226562 L 399.75 75.25 C 399.75 71.622968 398.47502 68.305041 396.34766 65.716797 z M 399.75 101.17969 L 392.98242 110.20312 L 396.38281 114.73633 C 398.48789 112.15472 399.75 108.8559 399.75 105.25 L 399.75 101.17969 z " />
    </g>
  </svg>
  <div class="submit">Zig-zag</div>
</div>
<div class="refresh">
  REFRESH
</div>

css

body {
  align-items: center;
  background: #c0e090;
  background: -webkit-linear-gradient(120deg, #c0e090, #F6D8E4);
  background: linear-gradient(120deg, #c0e090, #F6D8E4);
  display: flex;
  flex-direction: column;
  font-family: 'Nunito Sans', sans-serif;
  justify-content: center;
  height: 100vh;
  margin: 0;
}
.button {
  height: 60px;
  margin: 30px 0;
  position: relative;
  width: 200px;
}
.submit {
  align-items: center;
  background: #273439;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  color: #fff;
  display: flex;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 20px;
  font-weight: 200;
  height: 60px;
  justify-content: center;
  position: absolute;
  transition: background 300ms, opacity 500ms 800ms;
  user-select: none;
  width: 200px;
}
.submit:hover {
  background: #0e232e;
}
svg {
  left: -200px;
  position: absolute;
  top: -60px;
  transform: scale(1);
}
path {
  fill:#0e232e;
  stroke:#0e232e;
  transform-origin: 50%;
  transition: transform 1200ms cubic-bezier(0.6, -0.48, 0.735, 0.045), fill 1200ms, stroke 1200ms;
}
.refresh {
  bottom: 10px;
  cursor: pointer;
  font-weight: 400;
  left: auto;
  position: absolute;
  right: 30px;
  top: auto;
  width: 50px;
}

JavaScript

function reset1(path) {
  path.style.transitionDelay = 0;
  path.style.transformOrigin = `50%`;
  path.style.transform = `scale(1) rotate(0)`;
  path.style.fill = '#273439';
  path.style.stroke = '#273439';
}

function reset2(path) {
  path.style.transitionDuration = 0;
  path.style.transitionDelay = 0;
  path.style.transformOrigin = `50%`;
  path.style.transform = `scale(1) translateX(0)`;
  path.style.fill = '#273439';
  path.style.stroke = '#273439';
}

refresh.addEventListener('click', (e) => {
  buttons.forEach((button, i) => {
    const submit = button.querySelector('.submit');
    let paths = button.querySelectorAll('path')
    paths.forEach((path, j) => {
      resets[i](path, j);
    });
    setTimeout(() => {
      submit.style.backgroundColor = '#273439';
      submit.style.opacity = '1';
    }, 500)
  })
})

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg