<div>
<h1 class="c-title">Button Hover/Click Effects</h1>
<div class="c-container">
<button class="c-btn c-btn_sticky">
<span class="c-btn_text c-btn_text--next">Successful</span>
<svg class="c-btn_icon icon-sticky" viewBox="0 0 600 148">
<path d="M0 1H600V91.8923C600 103.822 594.091 114.977 584.222 121.678L578.99 125.23C567.928 132.742 553.113 131.461 543.504 122.162L535.631 114.544C524.719 103.985 506.559 108.093 501.254 122.319L499.337 127.461C492.859 144.835 467.973 143.898 462.818 126.087L461.439 121.32C457.797 108.738 441.671 105.179 433.073 115.06L427.324 121.665C421.167 128.741 409.614 126.154 407.062 117.128V117.128C404.304 107.38 391.355 105.405 385.818 113.889L383.102 118.051C377.355 126.856 364.19 125.987 359.651 116.503V116.503C354.853 106.478 340.667 106.239 335.533 116.096L327.928 130.697C320.308 145.326 299.8 146.447 290.632 132.736L275.895 110.697C269.979 101.85 256.982 101.824 251.032 110.648L244.27 120.673C239.693 127.46 229.25 125.678 227.183 117.757V117.757C224.93 109.13 213.111 108.066 209.354 116.153L202.021 131.938C196.333 144.183 178.889 144.081 173.344 131.771L165.728 114.865C161.659 105.833 148.857 105.731 144.502 114.628V114.628C140.087 123.646 127.025 123.281 123.277 113.967V113.967C119.687 105.049 107.429 104.119 102.537 112.394L90.1431 133.356C83.2568 145.003 65.8618 143.131 61.6122 130.285L59.1995 122.992C55.5604 111.991 40.3199 111.16 35.505 121.698V121.698C31.8452 129.709 21.3582 131.682 15.0369 125.55L6.43911 117.21C2.32304 113.218 0 107.728 0 101.993V1Z" />
</svg>
<span class="c-btn_text">Sticky</span>
</button>
<button class="c-btn c-btn_shards">
<span class="c-btn_text c-btn_text--next">Successful</span>
<svg class="c-btn_icon icon-shards" viewBox="0 0 506 74" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 53.28L20.474 74H0V53.28Z" />
<path d="M122.844 56.24L131.618 74H99.4451L122.844 56.24Z" />
<path d="M105.295 50.32L134.543 47.36L111.145 65.12L105.295 50.32Z" />
<path d="M84.8208 23.68L102.37 29.6L81.896 38.48L84.8208 23.68Z" />
<path d="M122.844 20.72L140.393 26.64L119.919 35.52L122.844 20.72Z" />
<path d="M119.919 35.52L140.393 26.64L134.543 47.36L119.919 35.52Z" />
<path d="M160.867 47.36L163.792 20.72L178.416 29.6L160.867 47.36Z" />
<path d="M172.566 74L187.191 59.2L190.116 74H172.566Z" />
<path d="M204.74 38.48L201.815 23.68L222.289 29.6L204.74 38.48Z" />
<path d="M201.815 23.68L198.89 14.8L201.815 0L219.364 11.84L201.815 23.68Z" />
<path d="M190.116 44.4L201.815 23.68L204.74 38.48L190.116 44.4Z" />
<path d="M207.665 74L210.59 53.28L222.289 74H207.665Z" />
<path d="M222.289 74L210.59 53.28L231.064 62.16L236.913 74H222.289Z" />
<path d="M187.191 59.2L190.116 44.4L204.74 38.48L210.59 53.28L187.191 59.2Z" />
<path d="M160.867 47.36L178.416 29.6L190.116 44.4L160.867 47.36Z" />
<path d="M198.89 14.8L181.341 0H201.815L198.89 14.8Z" />
<path d="M207.665 74H190.116L187.191 59.2L210.59 53.28L207.665 74Z" />
<path d="M231.064 62.16L210.59 53.28L204.74 38.48L216.439 32.56L231.064 62.16Z" />
<path d="M190.116 44.4L178.416 29.6L201.815 23.68L190.116 44.4Z" />
<path d="M239.838 44.4L216.439 32.56L239.838 20.72V44.4Z" />
<path d="M257.387 17.76L263.237 0H286.636L257.387 17.76Z" />
<path d="M272.012 45.88L251.538 35.52L272.012 29.6V45.88Z" />
<path d="M312.96 74L295.41 60.68L324.659 59.2L312.96 74Z" />
<path d="M350.983 65.12L342.208 56.24L345.133 47.36L353.908 41.44L374.381 53.28L350.983 65.12Z" />
<path d="M324.659 59.2L295.41 60.68V44.4H324.659V59.2Z" />
<path d="M312.96 74L324.659 59.2L345.133 47.36L336.358 74H312.96Z" />
<path d="M272.012 29.6L257.387 17.76L272.012 8.88V29.6Z" />
<path d="M295.41 44.4L272.012 45.88L286.636 26.64L295.41 44.4Z" />
<path d="M339.283 32.56L336.358 44.4L324.659 23.68L339.283 32.56Z" />
<path d="M339.283 8.88V32.56L324.659 23.68L312.96 11.84L339.283 8.88Z" />
<path d="M336.358 44.4H295.41L312.96 35.52L336.358 44.4Z" />
<path d="M377.306 74L350.983 65.12L368.532 56.24L377.306 74Z" />
<path d="M429.954 56.24H403.63L421.179 38.48L429.954 56.24Z" />
<path d="M470.902 74H444.578V59.2L470.902 74Z" />
<path d="M497.225 74H470.902L462.127 56.24L479.676 45.88L497.225 74Z" />
<path d="M462.127 56.24L438.728 41.44L435.803 32.56L441.653 17.76L459.202 29.6L462.127 56.24Z" />
<path d="M462.127 56.24L470.902 74L444.578 59.2L438.728 41.44L462.127 56.24Z" />
<path d="M421.179 38.48L412.405 47.36L403.63 38.48H394.855L412.405 20.72L421.179 38.48Z" />
<path d="M444.578 59.2L427.029 68.08L415.329 56.24H429.954L444.578 59.2Z" />
<path d="M444.578 74H418.254L427.029 68.08L444.578 59.2V74Z" />
<path d="M353.908 41.44L339.283 32.56L356.832 23.68L353.908 41.44Z" />
<path d="M339.283 32.56V8.88L356.832 14.8V23.68L339.283 32.56Z" />
<path d="M356.832 14.8L339.283 8.88L336.358 0H353.908L356.832 14.8Z" />
<path d="M400.705 74H377.306L368.532 56.24L374.382 53.28L391.931 56.24L400.705 74Z" />
<path d="M377.306 74H336.358L342.208 56.24L350.983 65.12L377.306 74Z" />
<path d="M353.908 41.44L345.133 47.36L324.659 59.2V44.4H336.358L339.283 32.56L353.908 41.44Z" />
<path d="M286.636 26.64L272.012 45.88V14.8L286.636 26.64Z" />
<path d="M295.41 44.4L286.636 26.64L301.26 11.84L295.41 44.4Z" />
<path d="M336.358 44.4L312.96 35.52L324.659 23.68L336.358 44.4Z" />
<path d="M374.382 53.28L353.908 41.44L356.832 23.68L374.382 53.28Z" />
<path d="M391.931 56.24L374.382 53.28L380.231 38.48L391.931 56.24Z" />
<path d="M406.555 26.64L394.856 38.48L377.306 20.72L406.555 26.64Z" />
<path d="M397.78 0L377.306 20.72L371.457 0H397.78Z" />
<path d="M424.104 0L412.405 20.72L406.555 26.64L377.306 20.72L397.78 0H424.104Z" />
<path d="M374.382 53.28L365.607 38.48H380.231L374.382 53.28Z" />
<path d="M365.607 38.48L356.832 23.68L377.306 20.72L365.607 38.48Z" />
<path d="M482.601 29.6L465.052 17.76L470.902 0L481.139 13.32L506 11.84L482.601 29.6Z" />
<path d="M441.653 17.76L424.104 0H447.503L441.653 17.76Z" />
<path d="M497.225 74L479.676 45.88L506 44.4V74H497.225Z" />
<path d="M462.127 56.24L459.202 29.6L479.676 45.88L462.127 56.24Z" />
<path d="M459.202 29.6L441.653 17.76H465.052L459.202 29.6Z" />
<path d="M506 44.4L479.676 45.88L506 29.6V44.4Z" />
<path d="M506 29.6L479.676 45.88L482.601 29.6H506Z" />
<path d="M506 29.6H482.601L506 11.84V29.6Z" />
<path d="M506 11.84L481.139 13.32L470.902 0H506V11.84Z" />
<path d="M479.676 45.88L459.202 29.6L465.052 17.76L482.601 29.6L479.676 45.88Z" />
<path d="M465.052 17.76H441.653L447.503 0H470.902L465.052 17.76Z" />
<path d="M412.405 20.72L424.104 0L441.653 17.76L412.405 20.72Z" />
<path d="M429.954 56.24L421.179 38.48L435.803 32.56L444.578 59.2L429.954 56.24Z" />
<path d="M421.179 38.48L412.405 20.72L441.653 17.76L435.803 32.56L421.179 38.48Z" />
<path d="M377.306 20.72L356.832 23.68L371.457 0L377.306 20.72Z" />
<path d="M394.856 38.48H365.607L377.306 20.72L394.856 38.48Z" />
<path d="M418.254 74H400.705L391.931 56.24L418.254 74Z" />
<path d="M427.029 68.08L418.254 74L391.931 56.24H415.329L427.029 68.08Z" />
<path d="M403.63 56.24H391.931L380.231 38.48H403.63L412.405 47.36L403.63 56.24Z" />
<path d="M356.832 23.68V14.8L353.908 0H371.457L356.832 23.68Z" />
<path d="M324.659 23.68L312.96 35.52V11.84L324.659 23.68Z" />
<path d="M339.283 8.88L312.96 11.84L318.809 0H336.358L339.283 8.88Z" />
<path d="M295.41 44.4L301.26 11.84H312.96V35.52L295.41 44.4Z" />
<path d="M301.26 11.84L286.636 26.64L272.012 14.8V8.88L286.636 0L301.26 11.84Z" />
<path d="M295.41 60.68L280.786 56.24L263.237 47.36V41.44L272.012 45.88L295.41 44.4V60.68Z" />
<path d="M228.139 56.24L216.439 32.56L239.838 44.4L228.139 56.24Z" />
<path d="M236.913 74L228.139 56.24L251.538 62.16L236.913 74Z" />
<path d="M228.139 56.24L239.838 44.4L251.538 62.16L228.139 56.24Z" />
<path d="M239.838 44.4V29.6L263.237 41.44L239.838 44.4Z" />
<path d="M286.636 0H318.809L312.96 11.84H301.26L286.636 0Z" />
<path d="M272.012 62.16L280.786 56.24L295.41 60.68L312.96 74H295.41L272.012 62.16Z" />
<path d="M239.838 20.72L248.613 0H263.237L257.387 17.76L239.838 20.72Z" />
<path d="M263.237 74L272.012 62.16L295.41 74H263.237Z" />
<path d="M239.838 29.6V20.72L257.387 17.76L272.012 29.6L251.538 35.52L239.838 29.6Z" />
<path d="M263.237 62.16V47.36L280.786 56.24L272.012 62.16H263.237Z" />
<path d="M251.538 62.16L239.838 44.4L263.237 41.44V62.16H251.538Z" />
<path d="M236.913 74L251.538 62.16H272.012L263.237 74H236.913Z" />
<path d="M239.838 20.72L219.364 11.84L242.763 0H248.613L239.838 20.72Z" />
<path d="M219.364 11.84L201.815 0H242.763L219.364 11.84Z" />
<path d="M222.289 29.6L201.815 23.68L219.364 11.84L239.838 20.72L222.289 29.6Z" />
<path d="M178.416 29.6L181.341 0L198.89 14.8L201.815 23.68L178.416 29.6Z" />
<path d="M163.792 56.24L187.191 59.2L172.566 74L163.792 56.24Z" />
<path d="M163.792 56.24L160.867 47.36L190.116 44.4L187.191 59.2L163.792 56.24Z" />
<path d="M163.792 20.72L166.717 0H181.341L178.416 29.6L163.792 20.72Z" />
<path d="M122.844 56.24L134.543 47.36L152.092 74H131.618L122.844 56.24Z" />
<path d="M137.468 2.96L149.168 0H166.717L140.393 26.64L137.468 2.96Z" />
<path d="M125.769 5.92L137.468 2.96L140.393 26.64L122.844 20.72L125.769 5.92Z" />
<path d="M116.994 0H149.168L125.769 5.92L116.994 0Z" />
<path d="M119.919 35.52L134.543 47.36L105.295 50.32L119.919 35.52Z" />
<path d="M155.017 11.84L149.168 35.52L140.393 26.64L155.017 11.84Z" />
<path d="M163.792 20.72L160.867 47.36L149.168 35.52L152.092 23.68L163.792 20.72Z" />
<path d="M166.717 0L163.792 20.72L152.092 23.68L155.017 11.84L166.717 0Z" />
<path d="M163.792 56.24L172.566 74H152.092L163.792 56.24Z" />
<path d="M134.543 47.36L140.393 26.64L160.867 47.36L140.393 56.24L134.543 47.36Z" />
<path d="M160.867 47.36L163.792 56.24L152.092 74L140.393 56.24L160.867 47.36Z" />
<path d="M125.769 5.92L119.919 35.52L102.37 29.6L105.295 20.72L125.769 5.92Z" />
<path d="M96.5202 0H116.994L125.769 5.92L105.295 20.72L93.5954 5.92L96.5202 0Z" />
<path d="M102.37 29.6L119.919 35.52L105.295 50.32L81.896 38.48L102.37 29.6Z" />
<path d="M93.5954 5.92L105.295 20.72L102.37 29.6L84.8208 23.68L93.5954 5.92Z" />
<path d="M61.422 20.72L67.2717 0H76.0462L81.896 38.48L61.422 20.72Z" />
<path d="M81.8959 38.48L76.0462 0H96.5202L84.8208 23.68L81.8959 38.48Z" />
<path d="M61.422 20.72L81.896 38.48H55.5723L61.422 20.72Z" />
<path d="M67.2717 38.48H81.896L105.295 50.32L84.8208 59.2L67.2717 38.48Z" />
<path d="M84.8208 59.2L105.295 50.32L111.144 65.12L99.4451 74H78.9711L84.8208 59.2Z" />
<path d="M46.7977 0L40.948 23.68L32.1734 14.8L46.7977 0Z" />
<path d="M67.2717 0L61.422 20.72L43.8728 11.84L46.7977 0H67.2717Z" />
<path d="M61.422 20.72L55.5722 38.48L40.971 23.68L43.8958 11.84L61.422 20.72Z" />
<path d="M49.7226 50.32L67.2717 74H38.0231L49.7226 50.32Z" />
<path d="M67.2717 38.48L58.4971 62.16L49.7225 50.32L55.5723 38.48H67.2717Z" />
<path d="M84.8208 59.2L78.9711 74H67.2717L58.4971 62.16L67.2717 38.48L84.8208 59.2Z" />
<path d="M32.1734 14.8L55.5723 38.48L46.7977 56.24L35.0983 41.44L32.1734 14.8Z" />
<path d="M35.0983 41.44L46.7977 56.24L38.0231 74H20.474L26.3237 50.32L35.0983 41.44Z" />
<path d="M0 32.56L11.6994 44.4V65.12L0 53.28V32.56Z" />
<path d="M11.6994 44.4L26.3237 50.32L20.474 74L11.6994 65.12V44.4Z" />
<path d="M14.6243 17.76L35.0983 41.44L26.3237 50.32L11.6994 44.4L8.77455 41.44L14.6243 17.76Z" />
<path d="M0 11.84L14.6243 17.76L8.77457 41.44L0 32.56V11.84Z" />
<path d="M0 0H23.3988L14.6243 17.76L0 11.84V0Z" />
<path d="M23.3988 0H46.7977L32.1734 14.8L35.0983 41.44L14.6243 17.76L23.3988 0Z" />
</svg>
<span class="c-btn_text">Shards</span>
</button>
<button class="c-btn c-btn_left">
<span class="c-btn_text c-btn_text--next">Successful</span>
<span class="c-btn_text">
<svg class="c-btn_icon icon-left" viewBox="0 0 27 74">
<path d="M5 0H26.5L12.5 11.5L20.5 26L12.5 36.5L18 47.5L15.5 62L26.5 74H5V0Z" fill="black" fill-opacity="0.2" />
<path class="path" d="M0 0H26L7.5 11.5L15.5 26L7.5 36.5L13 47.5L10.5 62L26 74H0V0Z" fill="white" />
</svg>
Left</span>
</button>
<br>
<button class="c-btn c-btn_square">
<span class="c-btn_text c-btn_text--next">Successful</span>
<svg class="c-btn_icon icon-square" viewBox="0 0 592 74">
<rect width="14.8" height="14.8" />
<rect y="14.8" width="14.8" height="14.8" />
<rect x="14.8" y="44.4" width="29.6" height="29.6" />
<rect y="59.2" width="14.8" height="14.8" />
<rect y="44.4" width="14.8" height="14.8" />
<rect y="29.6" width="14.8" height="14.8" />
<rect x="29.6" width="14.8" height="14.8" />
<rect x="74" y="29.6" width="29.6" height="29.6" />
<rect x="74" y="59.2" width="14.8" height="14.8" />
<rect x="133.2" width="29.6" height="29.6" />
<rect x="133.2" y="29.6" width="14.8" height="14.8" />
<rect x="133.2" y="44.4" width="14.8" height="14.8" />
<rect x="133.2" y="59.2" width="14.8" height="14.8" />
<rect x="148" y="29.6" width="14.8" height="14.8" />
<rect x="192.4" y="14.8" width="14.8" height="14.8" />
<rect x="222" y="59.2" width="14.8" height="14.8" />
<rect x="236.8" y="29.6" width="14.8" height="14.8" />
<rect x="266.4" y="29.6" width="14.8" height="14.8" />
<rect x="266.4" y="59.2" width="14.8" height="14.8" />
<rect x="296" width="29.6" height="29.6" />
<rect x="281.2" width="14.8" height="14.8" />
<rect x="281.2" y="14.8" width="14.8" height="14.8" />
<rect x="281.2" y="29.6" width="14.8" height="14.8" />
<rect x="310.8" y="59.2" width="14.8" height="14.8" />
<rect x="325.6" y="14.8" width="14.8" height="14.8" />
<rect x="340.4" width="14.8" height="14.8" />
<rect x="370" y="44.4" width="29.6" height="29.6" />
<rect x="355.2" y="59.2" width="14.8" height="14.8" />
<rect x="355.2" y="44.4" width="14.8" height="14.8" />
<rect x="355.2" y="29.6" width="14.8" height="14.8" />
<rect x="370" y="14.8" width="14.8" height="14.8" />
<rect x="399.6" width="14.8" height="14.8" />
<rect x="399.6" y="59.2" width="14.8" height="14.8" />
<rect x="414.4" y="14.8" width="29.6" height="29.6" />
<rect x="414.4" y="44.4" width="14.8" height="14.8" />
<rect x="414.4" width="14.8" height="14.8" />
<rect x="444" width="14.8" height="14.8" />
<rect x="444" y="29.6" width="14.8" height="14.8" />
<rect x="429.2" y="44.4" width="14.8" height="14.8" />
<rect x="429.2" y="59.2" width="14.8" height="14.8" />
<rect x="444" y="59.2" width="14.8" height="14.8" />
<rect x="444" y="44.4" width="14.8" height="14.8" />
<rect x="458.8" y="59.2" width="14.8" height="14.8" />
<rect x="473.6" y="59.2" width="14.8" height="14.8" />
<rect x="458.8" width="29.6" height="29.6" />
<rect x="458.8" y="29.6" width="14.8" height="14.8" />
<rect x="473.6" y="44.4" width="14.8" height="14.8" />
<rect x="473.6" y="29.6" width="14.8" height="14.8" />
<rect x="488.4" width="14.8" height="14.8" />
<rect x="488.4" y="14.8" width="14.8" height="14.8" />
<rect x="488.4" y="29.6" width="14.8" height="14.8" />
<rect x="488.4" y="44.4" width="14.8" height="14.8" />
<rect x="488.4" y="59.2" width="14.8" height="14.8" />
<rect x="503.2" y="59.2" width="14.8" height="14.8" />
<rect x="518" y="59.2" width="14.8" height="14.8" />
<rect x="503.2" y="44.4" width="14.8" height="14.8" />
<rect x="518" y="44.4" width="14.8" height="14.8" />
<rect x="518" width="29.6" height="29.6" />
<rect x="503.2" y="14.8" width="14.8" height="14.8" />
<rect x="503.2" width="14.8" height="14.8" />
<rect x="518" y="29.6" width="14.8" height="14.8" />
<rect x="532.8" y="29.6" width="14.8" height="14.8" />
<rect x="547.6" y="29.6" width="14.7999" height="14.8" />
<rect x="547.6" y="14.8" width="14.7999" height="14.8" />
<rect x="547.6" width="14.7999" height="14.8" />
<rect x="562.4" y="29.6" width="14.8" height="14.8" />
<rect x="577.2" y="29.6" width="14.8" height="14.8" />
<rect x="577.2" y="44.4" width="14.8" height="14.8" />
<rect x="577.2" y="59.2" width="14.8" height="14.8" />
<rect x="562.4" width="29.6" height="29.6" />
<rect x="532.8" y="44.4" width="14.8" height="14.8" />
<rect x="532.8" y="59.2" width="14.8" height="14.8" />
<rect x="547.6" y="44.4" width="29.6" height="29.6" />
<rect x="503.2" y="29.6" width="14.8" height="14.8" />
<rect x="458.8" y="44.4" width="14.8" height="14.8" />
<rect x="444" y="14.8" width="14.8" height="14.8" />
<rect x="429.2" width="14.8" height="14.8" />
<rect x="414.4" y="59.2" width="14.8" height="14.8" />
<rect x="399.6" y="44.4" width="14.8" height="14.8" />
<rect x="399.6" y="29.6" width="14.8" height="14.8" />
<rect x="399.6" y="14.8" width="14.8" height="14.8" />
<rect x="384.8" y="14.8" width="14.8" height="14.8" />
<rect x="384.8" width="14.8" height="14.8" />
<rect x="370" width="14.8" height="14.8" />
<rect x="384.8" y="29.6" width="14.8" height="14.8" />
<rect x="370" y="29.6" width="14.8" height="14.8" />
<rect x="355.2" y="14.8" width="14.8" height="14.8" />
<rect x="355.2" width="14.8" height="14.8" />
<rect x="340.4" y="14.8" width="14.8" height="14.8" />
<rect x="325.6" width="14.8" height="14.8" />
<rect x="340.4" y="59.2" width="14.8" height="14.8" />
<rect x="325.6" y="59.2" width="14.8" height="14.8" />
<rect x="325.6" y="29.6" width="29.6" height="29.6" />
<rect x="310.8" y="44.4" width="14.8" height="14.8" />
<rect x="296" y="59.2" width="14.8" height="14.8" />
<rect x="296" y="44.4" width="14.8" height="14.8" />
<rect x="310.8" y="29.6" width="14.8" height="14.8" />
<rect x="296" y="29.6" width="14.8" height="14.8" />
<rect x="281.2" y="44.4" width="14.8" height="14.8" />
<rect x="281.2" y="59.2" width="14.8" height="14.8" />
<rect x="266.4" y="44.4" width="14.8" height="14.8" />
<rect x="266.4" y="14.8" width="14.8" height="14.8" />
<rect x="266.4" width="14.8" height="14.8" />
<rect x="251.6" y="29.6" width="14.8" height="14.8" />
<rect x="251.6" y="14.8" width="14.8" height="14.8" />
<rect x="251.6" width="14.8" height="14.8" />
<rect x="236.8" y="44.4" width="29.6" height="29.6" />
<rect x="222" y="44.4" width="14.8" height="14.8" />
<rect x="222" y="29.6" width="14.8" height="14.8" />
<rect x="222" width="29.6" height="29.6" />
<rect x="207.2" width="14.8" height="14.8" />
<rect x="192.4" width="14.8" height="14.8" />
<rect x="207.2" y="14.8" width="14.8" height="14.8" />
<rect x="207.2" y="29.6" width="14.8" height="14.8" />
<rect x="192.4" y="29.6" width="14.8" height="14.8" />
<rect x="192.4" y="44.4" width="29.6" height="29.6" />
<rect x="177.6" y="59.2" width="14.8" height="14.8" />
<rect x="177.6" y="44.4" width="14.8" height="14.8" />
<rect x="177.6" y="29.6" width="14.8" height="14.8" />
<rect x="177.6" y="14.8" width="14.8" height="14.8" />
<rect x="177.6" width="14.8" height="14.8" />
<rect x="162.8" y="59.2" width="14.8" height="14.8" />
<rect x="162.8" y="44.4" width="14.8" height="14.8" />
<rect x="162.8" y="29.6" width="14.8" height="14.8" />
<rect x="162.8" y="14.8" width="14.8" height="14.8" />
<rect x="162.8" width="14.8" height="14.8" />
<rect x="148" y="59.2" width="14.8" height="14.8" />
<rect x="148" y="44.4" width="14.8" height="14.8" />
<rect x="118.4" y="59.2" width="14.8" height="14.8" />
<rect x="118.4" y="44.4" width="14.8" height="14.8" />
<rect x="118.4" y="29.6" width="14.8" height="14.8" />
<rect x="118.4" y="14.8" width="14.8" height="14.8" />
<rect x="118.4" width="14.8" height="14.8" />
<rect x="103.6" width="14.8" height="14.8" />
<rect x="103.6" y="14.8" width="14.8" height="14.8" />
<rect x="103.6" y="29.6" width="14.8" height="14.8" />
<rect x="103.6" y="44.4" width="14.8" height="14.8" />
<rect x="103.6" y="59.2" width="14.8" height="14.8" />
<rect x="88.8" width="14.8" height="14.8" />
<rect x="74" width="14.8" height="14.8" />
<rect x="88.8" y="14.8" width="14.8" height="14.8" />
<rect x="74" y="14.8" width="14.8" height="14.8" />
<rect x="88.8" y="59.2" width="14.8" height="14.8" />
<rect x="59.2" width="14.8" height="14.8" />
<rect x="59.2" y="14.8" width="14.8" height="14.8" />
<rect x="59.2" y="29.6" width="14.8" height="14.8" />
<rect x="59.2" y="44.4" width="14.8" height="14.8" />
<rect x="59.2" y="59.2" width="14.8" height="14.8" />
<rect x="44.4" y="59.2" width="14.8" height="14.8" />
<rect x="44.4" y="44.4" width="14.8" height="14.8" />
<rect x="44.4" y="29.6" width="14.8" height="14.8" />
<rect x="44.4" y="14.8" width="14.8" height="14.8" />
<rect x="44.4" width="14.8" height="14.8" />
<rect x="14.8" width="14.8" height="14.8" />
<rect x="29.6" y="14.8" width="14.8" height="14.8" />
<rect x="14.8" y="14.8" width="14.8" height="14.8" />
<rect x="29.6" y="29.6" width="14.8" height="14.8" />
<rect x="14.8" y="29.6" width="14.8" height="14.8" />
</svg>
<span class="c-btn_text">Square</span>
</button>
<button class="c-btn c-btn_line">
<svg class="c-btn_icon icon-line" viewBox="0 0 600 151">
<line x1="8.49999" y1="0.996622" x2="9.49999" y2="148.997" />
<line x1="15.5" y1="0.996622" x2="16.5" y2="148.997" />
<line x1="22.5" y1="0.996622" x2="23.5" y2="148.997" />
<line x1="30.5" y1="0.996622" x2="31.5" y2="148.997" />
<line x1="37.5" y1="0.996622" x2="38.5" y2="148.997" />
<line x1="44.5" y1="0.996622" x2="45.5" y2="148.997" />
<line x1="51.5" y1="0.996622" x2="52.5" y2="148.997" />
<line x1="58.5" y1="0.996622" x2="59.5" y2="148.997" />
<line x1="65.5" y1="0.996622" x2="66.5" y2="148.997" />
<line x1="72.5" y1="0.996622" x2="73.5" y2="148.997" />
<line x1="79.5" y1="0.996622" x2="80.5" y2="148.997" />
<line x1="86.5" y1="0.996622" x2="87.5" y2="148.997" />
<line x1="93.5" y1="0.996622" x2="94.5" y2="148.997" />
<line x1="100.5" y1="0.996622" x2="101.5" y2="148.997" />
<line x1="107.5" y1="0.996622" x2="108.5" y2="148.997" />
<line x1="114.5" y1="0.996622" x2="115.5" y2="148.997" />
<line x1="120.5" y1="0.996622" x2="121.5" y2="148.997" />
<line x1="127.5" y1="0.996622" x2="128.5" y2="148.997" />
<line x1="134.5" y1="0.996622" x2="135.5" y2="148.997" />
<line x1="142.5" y1="0.996622" x2="143.5" y2="148.997" />
<line x1="150.5" y1="0.996622" x2="151.5" y2="148.997" />
<line x1="158.5" y1="0.996622" x2="159.5" y2="148.997" />
<line x1="165.5" y1="0.996622" x2="166.5" y2="148.997" />
<line x1="173.5" y1="0.996622" x2="174.5" y2="148.997" />
<line x1="183.5" y1="0.996622" x2="184.5" y2="148.997" />
<line x1="193.5" y1="0.996622" x2="194.5" y2="148.997" />
<line x1="205.5" y1="0.996622" x2="206.5" y2="148.997" />
<line x1="217.5" y1="0.996622" x2="218.5" y2="148.997" />
<line x1="226.5" y1="0.996622" x2="227.5" y2="148.997" />
<line x1="235.5" y1="0.996622" x2="236.5" y2="148.997" />
<line x1="242.5" y1="0.996622" x2="243.5" y2="148.997" />
<line x1="249.5" y1="0.996622" x2="250.5" y2="148.997" />
<line x1="257.5" y1="0.996622" x2="258.5" y2="148.997" />
<line x1="265.5" y1="0.996622" x2="266.5" y2="148.997" />
<line x1="273.5" y1="0.996622" x2="274.5" y2="148.997" />
<line x1="281.5" y1="0.996622" x2="282.5" y2="148.997" />
<line x1="289.5" y1="0.996622" x2="290.5" y2="148.997" />
<line x1="297.5" y1="0.996622" x2="298.5" y2="148.997" />
<line x1="303.5" y1="0.996622" x2="304.5" y2="148.997" />
<line x1="310.5" y1="0.996622" x2="311.5" y2="148.997" />
<line x1="317.5" y1="0.996622" x2="318.5" y2="148.997" />
<line x1="327.5" y1="0.996622" x2="328.5" y2="148.997" />
<line x1="338.5" y1="0.996622" x2="339.5" y2="148.997" />
<line x1="349.5" y1="0.996622" x2="350.5" y2="148.997" />
<line x1="362.5" y1="0.996622" x2="363.5" y2="148.997" />
<line x1="371.5" y1="0.996622" x2="372.5" y2="148.997" />
<line x1="377.5" y1="0.996622" x2="378.5" y2="148.997" />
<line x1="384.5" y1="0.996622" x2="385.5" y2="148.997" />
<line x1="391.5" y1="0.996622" x2="392.5" y2="148.997" />
<line x1="397.5" y1="0.996622" x2="398.5" y2="148.997" />
<line x1="404.5" y1="0.996622" x2="405.5" y2="148.997" />
<line x1="411.5" y1="0.996622" x2="412.5" y2="148.997" />
<line x1="418.5" y1="0.996622" x2="419.5" y2="148.997" />
<line x1="427.5" y1="0.996622" x2="428.5" y2="148.997" />
<line x1="436.5" y1="0.996622" x2="437.5" y2="148.997" />
<line x1="446.5" y1="0.996622" x2="447.5" y2="148.997" />
<line x1="458.5" y1="0.996622" x2="459.5" y2="148.997" />
<line x1="469.5" y1="0.996622" x2="470.5" y2="148.997" />
<line x1="477.5" y1="0.996622" x2="478.5" y2="148.997" />
<line x1="482.5" y1="0.996622" x2="483.5" y2="148.997" />
<line x1="488.5" y1="0.996622" x2="489.5" y2="148.997" />
<line x1="494.5" y1="0.996622" x2="495.5" y2="148.997" />
<line x1="501.5" y1="0.996622" x2="502.5" y2="148.997" />
<line x1="508.5" y1="0.996622" x2="509.5" y2="148.997" />
<line x1="515.5" y1="0.996622" x2="516.5" y2="148.997" />
<line x1="521.5" y1="0.996622" x2="522.5" y2="148.997" />
<line x1="526.5" y1="0.996622" x2="527.5" y2="148.997" />
<line x1="531.5" y1="0.996622" x2="532.5" y2="148.997" />
<line x1="537.5" y1="0.996622" x2="538.5" y2="148.997" />
<line x1="543.5" y1="0.996622" x2="544.5" y2="148.997" />
<line x1="549.5" y1="0.996622" x2="550.5" y2="148.997" />
<line x1="558.5" y1="0.996622" x2="559.5" y2="148.997" />
<line x1="567.5" y1="0.996622" x2="568.5" y2="148.997" />
<line x1="577.5" y1="0.996622" x2="578.5" y2="148.997" />
<line x1="583.5" y1="0.996622" x2="584.5" y2="148.997" />
<line x1="589.5" y1="0.996622" x2="590.5" y2="148.997" />
<line x1="594.5" y1="0.996622" x2="595.5" y2="148.997" />
</svg>
<span class="c-btn_text c-btn_text--next">Successful</span>
<span class="c-btn_text">Line</span>
</button>
</div>
<a class="box-item" href="https://codepen.io/Anna_Batura/" target="_blank"><svg class="rabbit" version="1.2" viewBox="0 0 600 600"><path d="m 335.94313,30.576451 c -9.79312,-0.146115 -17.39091,4.439466 -17.39091,13.789758 0,11.508038 -2.91019,60.415461 1.40532,76.238951 4.31553,15.82355 21.58583,38.97215 34.51834,54.67597 10.06946,12.22726 4.34772,41.69626 4.34772,56.0813 0,14.38499 -2.89751,25.9107 -8.65153,25.9107 -5.75402,0 -14.35971,5.75217 -20.11373,11.50612 -5.75395,5.75402 -11.51588,12.95631 -18.70841,7.20229 -7.19251,-5.75402 -20.15388,-11.49441 -43.16987,-15.80992 -23.01609,-4.31551 -61.84129,-0.0234 -86.29583,8.60763 -24.45458,8.63104 -76.25857,56.11061 -90.643535,77.6882 -14.385056,21.5775 -15.799189,87.73247 -14.36068,97.80193 1.438509,10.06953 -2.908267,17.28255 -10.100778,8.65153 -7.192459,-8.63104 -12.911438,-4.30381 -12.911438,-4.30381 0,0 -7.202292,14.37045 -7.202292,21.56298 0,7.19244 2.854564,14.36068 2.854564,14.36068 0,0 -11.506099,8.65056 -11.506099,14.40458 0,5.75397 11.515881,15.83044 18.708391,24.46146 7.192546,8.63097 31.651182,25.89997 41.720624,24.46148 10.069543,-1.43851 28.775063,-0.0121 35.967573,4.3038 7.19253,4.31551 24.44687,10.06761 46.02443,11.5061 21.57752,1.43851 81.97845,5.75307 97.80193,5.75307 15.82357,0 20.1675,-2.86435 27.35996,-10.05688 7.19253,-7.19245 -5.78527,-15.84115 -10.10079,-25.9107 -4.31551,-10.06946 14.40363,-7.16912 20.15765,-8.60763 5.75402,-1.43849 21.59424,-11.5061 31.66376,-11.5061 10.06953,0 8.6165,10.05589 21.56298,15.80993 12.94654,5.75393 31.63939,24.43902 46.02443,27.31602 14.38497,2.87695 47.47173,0.0121 58.97979,-4.30381 11.50797,-4.31551 10.06946,-14.37044 0,-21.56297 -10.06955,-7.19244 -34.50663,-20.16742 -38.82214,-27.35994 -4.31551,-7.19246 -5.74329,-15.81969 1.44924,-23.01224 7.19251,-7.19252 14.35876,-4.30292 25.86678,-10.05685 11.50806,-5.75402 15.80992,-23.04354 15.80992,-33.11301 0,-10.06953 1.36928,-21.01352 5.75307,-27.31602 3.67345,-5.28128 5.10015,-22.13212 5.30499,-33.64009 0.21874,-12.28864 -5.29329,-15.24871 -9.60881,-22.44122 -4.31543,-7.19246 4.30285,-17.25917 10.05687,-17.25917 5.75402,0 31.65108,-4.33602 41.72062,-8.65153 10.06946,-4.31546 20.16744,-23.03273 27.35995,-31.66377 7.19246,-8.63095 1.41799,-27.31512 -8.65154,-33.06907 -10.06954,-5.75402 -10.07746,-21.59431 -18.70841,-31.66377 -8.63103,-10.06953 -18.68507,-31.62961 -27.31604,-38.82213 -8.63101,-7.19253 -28.77502,-12.95535 -35.96755,-12.95535 -7.19253,0 -11.50612,9e-4 -11.50612,-5.75306 0,-5.75402 -1.44924,-12.9203 -1.44924,-25.86678 0,-12.94655 -16.24344,-68.464566 -37.3729,-102.149659 -4.40799,-7.027282 -11.5581,-5.405316 -20.15765,-2.898485 -5.69412,1.659863 -8.60761,4.35564 -8.60761,23.056136 0,18.700566 -11.50515,-0.03133 -17.25917,-10.100794 -5.75403,-10.069512 -15.86265,-21.58444 -28.80918,-24.461458 -2.42749,-0.539415 -4.76669,-0.800692 -7.02665,-0.834399 z" id="rabbit"></path></svg></a> </div>@import "compass/css3"
@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto)
\:root
--animation-time: 1s
--animation-time-delay-a: 0.1s
--animation-time-delay-b: 0.2s
--animation-time-delay-c: 0.3s
html
height: 100%
body
font-family: Roboto, sans-serif
color: #515a6e
background-color: #e7ebff
height: 100%
margin: 0
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
display: -webkit-box
display: -ms-flexbox
display: flex
-webkit-box-align: center
-ms-flex-align: center
align-items: center
-webkit-box-pack: center
-ms-flex-pack: center
justify-content: center
.c-container
text-align: center
padding-bottom: 80px
.c-btn
margin: 10px
.c-title
text-align: center
.c-btn
font-size: 18px
line-height: 36px
font-weight: 500
max-width: 240px
text-decoration: none
display: inline-flex
position: relative
align-items: center
justify-content: center
@include box-sizing()
min-width: 35px
border: none
outline: none
padding: 0
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
-webkit-appearance: none
overflow: visible
vertical-align: middle
white-space: nowrap
overflow: hidden
&_icon
pointer-events: none
position: absolute
left: 50%
top: 0
margin-left: -145px
width: auto
height: 100%
z-index: 1
&_text
box-sizing: border-box
display: block
width: 100%
padding: 0 12px 0 12px
border-radius: var(--border-radius)
@include transition(all var(--animation-time))
&--next
width: auto
position: absolute
bottom: 100%
left: 0
z-index: 2
.c-btn_sticky
color: #fff
background: linear-gradient(#72abff, #1e5ce4)
box-shadow: 0 2px 12px -3px #1e5ce4
&:hover
.icon-sticky
@include transform(translateY(-70%))
&.active
.icon-sticky
@include transform(translateY(0%))
.c-btn_text
@include transform(translateY(100%))
.icon-sticky
height: 200%
@include transition(all var(--animation-time))
@include transform(translateY(-100%))
path
fill: #1850cb
.c-btn_shards
color: #fff
background: linear-gradient(#ff67cc, #ff6789)
box-shadow: 0 2px 12px -3px #ff67cc
&:hover
path
@include transform(translateY(0))
&.active
path
@include transform(translateY(80px))
.c-btn_text
@include transform(translateY(100%))
.icon-shards
margin-left: -123px
path
fill: #ffffff
opacity: 0.4
transform-box: fill-box
transform-origin: center
@include transition(all var(--animation-time))
@include transform(translateY(-80px))
&:nth-child(2n)
transition-delay: var(--animation-time-delay-a)
&:nth-child(3n)
transition-delay: var(--animation-time-delay-b)
&:nth-child(4n)
transition-delay: var(--animation-time-delay-c)
.c-btn_square
color: #fff
background: linear-gradient(#ff9900, #ff5050)
box-shadow: 0 2px 12px -3px #ff5050
&:hover
rect
@include transform(scale(1))
&.active
rect
@include transform(scale(0))
.c-btn_text
@include transform(translateY(100%))
.icon-square
margin-left: -144px
rect
fill: #ffffff
opacity: 0.3
transform-box: fill-box
transform-origin: center
@include transition(all var(--animation-time))
@include transform(scale(0))
&:nth-child(2n)
transition-delay: var(--animation-time-delay-a)
&:nth-child(3n)
transition-delay: var(--animation-time-delay-b)
&:nth-child(4n)
transition-delay: var(--animation-time-delay-c)
.c-btn_left
box-shadow: 0 2px 12px -3px #1fa3ca
background: #4D74F7
.c-btn_text
@include transform(translateX(0))
color: #fff
background: linear-gradient(#3bbca5, #1fa3ca)
&--next
bottom: 0
right: 100%
left: auto
color: #fff
background: #4D74F7
&:hover
.icon-left
@include transform(translateX(0))
&.active
.icon-left
@include transform(translateX(-2px))
.c-btn_text
@include transform(translateX(100%))
&--next
@include transform(translateX(100%))
.icon-left
margin-left: 0
left: 0
z-index: 3
@include transition(all var(--animation-time))
@include transform(translateX(-11px))
.path
fill: #4D74F7
.c-btn_line
color: #fff
background: linear-gradient(#637dfb, #9a0dfe)
box-shadow: 0 2px 12px -3px #9a0dfe
.c-btn_text
z-index: 2
&:hover:not(.active)
line
stroke-dashoffset: 200
&.active
line
stroke-dashoffset: 1000
.icon-line
@include transform(translateY(-50%))
.c-btn_text
@include transform(translateY(100%))
&.animated
line
stroke-dashoffset: 0
.icon-line
height: 200%
margin-left: -140px
@include transition(all var(--animation-time))
@include transform(translateY(0))
line
@include transition(all var(--animation-time))
stroke: #9999ff
fill: none
stroke-width: 10px
stroke-linecap: round
stroke-dasharray: 1000
stroke-dashoffset: 1000
&:nth-child(2n)
transition-delay: var(--animation-time-delay-a)
opacity: 0.8
&:nth-child(3n)
transition-delay: var(--animation-time-delay-b)
opacity: 0.6
&:nth-child(4n)
transition-delay: var(--animation-time-delay-c)
opacity: 0.4
.box-item
position: absolute
bottom: 20px
right: 20px
z-index: 3
.rabbit
width: 50px
height: 50px
fill: #fff$(".c-btn").click(function(){
var $this = $(this);
var btnTextNextWidth = $this.find('.c-btn_text--next').outerWidth();
$this.addClass('active');
$this.animate({ width: btnTextNextWidth });
});
External CSS
This Pen doesn't use any external CSS resources.