پیشنمایش زنده
کد HTML
<button class="button">
<svg xml:space="preserve" viewBox="0 0 70 70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<linearGradient gradientUnits="userSpaceOnUse" y2="66.675" y1="1.4599" x2="43.183" x1="25.068" id="c">
<stop offset=".2849" stop-color="#00CDD7"></stop>
<stop offset=".9409" stop-color="#2086D7"></stop>
</linearGradient>
<polygon fill="url(#c)" points="9.4 63.3 0 7.3 17.5 0.1 28.6 6.7 38.8 1.2 60.1 9.4 48.1 70"></polygon>
<linearGradient gradientUnits="userSpaceOnUse" y2="54.671" y1="9.7343" x2="61.365" x1="30.72" id="b">
<stop offset=".1398" stop-color="#FFF045"></stop>
<stop offset=".3656" stop-color="#00CDD7"></stop>
</linearGradient>
<polygon fill="url(#b)" points="70 23.7 61 1.4 44.6 0 19.3 24.3 26.1 55.6 38.8 64.6 70 46 62.3 31.7"></polygon>
<linearGradient gradientUnits="userSpaceOnUse" y2="29.544" y1="15.29" x2="65.106" x1="61.082" id="a">
<stop offset=".2849" stop-color="#00CDD7"></stop>
<stop offset=".9409" stop-color="#2086D7"></stop>
</linearGradient>
<polygon fill="url(#a)" points="56 20.4 62.3 31.7 70 23.7 64.4 9.8"></polygon>
<rect height="43.2" width="43.2" y="13.4" x="13.4"></rect>
<rect fill="#fff" height="2.7" width="16.2" y="48.5" x="17.5"></rect>
<path fill="#fff" d="m38.7 34.3 2.3-2.8c1.6 1.3 3.3 2.2 5.3 2.2 1.6 0 2.5-0.6 2.5-1.7v-0.1c0-1-0.6-1.5-3.6-2.3-3.6-0.9-5.8-1.9-5.8-5.5v-0.1c0-3.3 2.6-5.4 6.2-5.4 2.6 0 4.8 0.8 6.6 2.3l-2 3c-1.6-1.1-3.1-1.8-4.6-1.8s-2.3 0.7-2.3 1.6v0.1c0 1.2 0.8 1.6 3.8 2.4 3.6 1 5.6 2.3 5.6 5.4v0.1c0 3.6-2.7 5.6-6.5 5.6-2.7-0.1-5.4-1.1-7.5-3"></path>
<polygon fill="#fff" points="35.2 19 32.5 29.4 29.5 19 26.5 19 23.4 29.4 20.7 19 16.6 19 21.7 36.9 25 36.9 28 26.5 30.9 36.9 34.3 36.9 39.4 19"></polygon>
</svg>
<p class="text">Edit CSS</p>
</button>
کد CSS
.button {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 15px;
gap: 15px;
background-color: #03c6d7;
outline: 3px #03c6d7 solid;
outline-offset: -3px;
border-radius: 5px;
border: none;
cursor: pointer;
transition: 400ms;
}
.button .text {
color: white;
font-weight: 700;
font-size: 1em;
transition: 400ms;
}
.button svg path {
transition: 400ms;
}
.button:hover {
background-color: transparent;
}
.button:hover .text {
color: #007ACC;
}