پیشنمایش زنده
کد HTML
<button class="aero-arrow">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg1"
version="1.1"
viewBox="0 0 24 24"
>
<defs id="defs1">
<linearGradient id="linearGradient1">
<stop
id="stop1"
offset="0"
style="stop-color:#ffffff;stop-opacity:1;"
></stop>
<stop
id="stop3"
offset="0.61404896"
style="stop-color:#ffffff;stop-opacity:1;"
></stop>
<stop
id="stop2"
offset="1"
style="stop-color:#cdd0d4;stop-opacity:1;"
></stop>
</linearGradient>
<linearGradient
gradientTransform="matrix(1.0261378,0,0,1.0261378,2.0522755e-6,-0.77670555)"
y2="23.92"
x2="11.92"
y1="0.079999998"
x1="11.92"
gradientUnits="userSpaceOnUse"
id="linearGradient4"
xlink:href="#linearGradient1"
></linearGradient>
</defs>
<path
d="m 12.437913,1.3276768 a 2.6266927,2.6266927 0 0 0 -0.617287,0.024049 2.6266927,2.6266927 0 0 0 -1.447014,0.7375366 l -0.02204,0.022045 a 2.6266926,2.6266926 0 0 0 0,3.7157412 l 3.547391,3.5473917 H 2.6274739 A 2.6266927,2.6266927 0 0 0 0,11.999911 2.6266927,2.6266927 0 0 0 2.6274739,14.625381 H 13.898956 l -3.54739,3.54739 a 2.6266926,2.6266926 0 0 0 0,3.715741 l 0.02204,0.02204 a 2.6266928,2.6266928 0 0 0 3.715741,0 L 24,11.999911 14.089353,2.0892634 a 2.6266927,2.6266927 0 0 0 -1.65144,-0.7615866 z"
style="fill:url(#linearGradient4);stroke-width:1.54439"
id="path4"
></path>
</svg>
</button>
کد CSS
.aero-arrow {
position: relative;
width: 2em;
height: 2em;
padding: 0.3em;
border-radius: 100%;
border: 1px solid #4d7bbf;
background: linear-gradient(#0000 50%, #042c8b 50%, #80f1f9),
radial-gradient(circle, #3069b2, #bbc6e0 70.7%);
cursor: pointer;
isolation: isolate;
}
.aero-arrow::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(#0000 50%, #013c97 50%, #a3fcff),
radial-gradient(circle, #3889e0, #c7d9f2 70.7%);
z-index: -1;
opacity: 0;
transition: 0.5s all;
}
.aero-arrow::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(#0000 50%, #01072e 50%, #55d2fd),
radial-gradient(circle, #29467b, #8d98ad 70.7%);
z-index: -1;
opacity: 0;
}
.aero-arrow:hover::before {
opacity: 1;
}
.aero-arrow:hover {
border: 1px solid #5d9be0;
}
.aero-arrow:active:hover {
border: 1px solid #030d48;
}
.aero-arrow:active::before {
transition: 0s all;
}
.aero-arrow:active:hover::after {
opacity: 1;
}