<div>
<div class="c-container">
<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">Button Hover/Click Effects</span>
</button>
</div>
</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
background-color: #1a1a1a
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
.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-radius: 36px
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 15px 0 15px
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_shards
color: #fff
background: #1800ff
box-shadow: 0 2px 12px -3px #1800ff
&: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)
.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.