پیشنمایش زنده
کد HTML
<button class="aero-button">
<div class="inner">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<defs id="defs1">
<linearGradient id="linearGradient5">
<stop
id="stop6"
offset="0"
style="stop-color:#21a800;stop-opacity:1;"
></stop>
<stop
id="stop8"
offset="0.25205275"
style="stop-color:#21a800;stop-opacity:1;"
></stop>
<stop
id="stop7"
offset="1"
style="stop-color:#86f656;stop-opacity:1;"
></stop>
</linearGradient>
<linearGradient id="linearGradient2">
<stop
id="stop2"
offset="0"
style="stop-color:#4abd39;stop-opacity:1;"
></stop>
<stop
id="stop4"
offset="0.25885141"
style="stop-color:#62e745;stop-opacity:1;"
></stop>
<stop
id="stop5"
offset="0.67351842"
style="stop-color:#62e745;stop-opacity:1;"
></stop>
<stop
id="stop3"
offset="1"
style="stop-color:#39ab29;stop-opacity:1;"
></stop>
</linearGradient>
<linearGradient
gradientTransform="matrix(0.90480483,0,0,1.0261186,1.1423413,-0.41972613)"
gradientUnits="userSpaceOnUse"
y2="23.142714"
x2="12"
y1="11.142714"
x1="0"
id="linearGradient3"
xlink:href="#linearGradient2"
></linearGradient>
<linearGradient
gradientTransform="matrix(0.90480483,0,0,1.0261186,1.1423413,-0.41972613)"
gradientUnits="userSpaceOnUse"
y2="23.142714"
x2="12"
y1="11.142714"
x1="0"
id="linearGradient7"
href="#linearGradient5"
></linearGradient>
</defs>
<path
style="fill:url(#linearGradient3);fill-opacity:1;stroke:url(#linearGradient7);stroke-width:0.963555;stroke-dasharray:none"
id="path2"
d="M 22.857657,11.01402 H 16.653281 V 0.45965755 H 7.3467174 V 11.01402 H 1.1423413 L 11.999999,23.327443 Z"
></path>
</svg>
<span
>Download <br />
Free Trial!</span
>
</div>
</button>
کد CSS
.aero-button {
position: relative;
cursor: pointer;
border-radius: 4px;
border: 1px solid #3d80b1;
background: #d3ecfb;
overflow: hidden;
isolation: isolate;
transition: 0.05s all;
}
.aero-button::before {
content: "";
position: absolute;
inset: 0;
top: 50%;
background: linear-gradient(
90deg,
#8bd2f6,
#a7dbf7 30%,
#a7dbf7 50%,
#7bcaf4
);
z-index: -1;
transition: inherit;
}
.aero-button::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0px 0px 0px 1px #dcf1fc;
z-index: 1;
transition: inherit;
}
.inner {
position: relative;
display: flex;
flex-direction: row;
padding: 4px;
transition: inherit;
}
.inner svg {
height: 2.4em;
margin: auto;
transition: inherit;
}
.aero-button:hover {
background: #f3feff;
}
.aero-button:hover::before {
background: linear-gradient(
90deg,
#7ae4ff,
#b7fbfe 30%,
#b7fbfe 50%,
#7ae4ff
);
}
.aero-button:active {
border: 1px solid #1d415b;
background: #a9d8f2;
}
.aero-button:active::before {
background: linear-gradient(
90deg,
#6abce8,
#98d1f0 30%,
#98d1f0 50%,
#6abce8
);
translate: 1px 1px;
}
.aero-button:active::after {
box-shadow:
inset 2px 2px 4px -2px #0007,
inset -2px 2px 4px -2px #0007;
}
.aero-button:active .inner {
translate: 1px 1px;
}