پیشنمایش زنده
کد HTML
<button class="Projects-Button">
<span class="IconContainer">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 259 259"
class="svgBG"
>
<circle
stroke-width="7"
stroke="#fff"
r="69"
cy="129.5"
cx="129.5"
></circle>
<circle fill="#fff" r="18.5" cy="18.5" cx="129.5"></circle>
<circle fill="#fff" r="18.5" cy="51.5" cx="206.5"></circle>
<circle fill="#fff" r="18.5" cy="129.5" cx="240.5"></circle>
<circle fill="#fff" r="18.5" cy="207.5" cx="207.5"></circle>
<circle fill="#fff" r="18.5" cy="206.5" cx="52.5"></circle>
<circle fill="#fff" r="18.5" cy="240.5" cx="129.5"></circle>
<circle fill="#fff" r="18.5" cy="129.5" cx="18.5"></circle>
<circle fill="#fff" r="18.5" cy="50.5" cx="51.5"></circle>
<line
stroke-width="8"
stroke="#fff"
y2="78.7279"
x2="79.3848"
y1="63.1716"
x1="63.8284"
></line>
<line
stroke-width="8"
stroke="#fff"
y2="194.728"
x2="195.385"
y1="179.172"
x1="179.828"
></line>
<line
stroke-width="8"
stroke="#fff"
y2="58"
x2="130"
y1="36"
x1="130"
></line>
<line
stroke-width="8"
stroke="#fff"
y2="64.1715"
x2="194.314"
y1="78.3137"
x1="180.172"
></line>
<line
stroke-width="8"
stroke="#fff"
y2="180.172"
x2="78.3137"
y1="194.314"
x1="64.1716"
></line>
<line
stroke-width="8"
stroke="#fff"
y2="223"
x2="130"
y1="201"
x1="130"
></line>
<line
stroke-width="8"
stroke="#fff"
y2="129"
x2="223"
y1="129"
x1="201"
></line>
<line
stroke-width="8"
stroke="#fff"
y2="129"
x2="58"
y1="129"
x1="36"
></line>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 110 110"
class="svgFG"
>
<circle stroke-width="28" stroke="#fff" r="32" cy="55" cx="55"></circle>
<path
fill="#fff"
d="M41 4C41 1.79086 42.7909 0 45 0H65C67.2091 0 69 1.79086 69 4V12H41V4Z"
></path>
<path
fill="#fff"
d="M91.9838 16.9513C93.9123 15.8736 96.3492 16.5633 97.4269 18.4918L107.183 35.9507C108.261 37.8791 107.571 40.3161 105.643 41.3937L98.6592 45.2963L85.0002 20.8538L91.9838 16.9513Z"
></path>
<path
fill="#fff"
d="M106.209 69.0964C108.106 70.2275 108.728 72.6828 107.596 74.5804L97.3555 91.7596C96.2243 93.6571 93.7691 94.2784 91.8715 93.1472L84.9998 89.0509L99.337 65L106.209 69.0964Z"
></path>
<path
fill="#fff"
d="M69 106C69 108.209 67.2091 110 65 110L45 110C42.7909 110 41 108.209 41 106L41 98L69 98V106Z"
></path>
<path
fill="#fff"
d="M17.4641 93.2485C15.5509 94.3531 13.1046 93.6976 12 91.7844L2 74.4639C0.89543 72.5508 1.55093 70.1044 3.4641 68.9998L10.3923 64.9998L24.3923 89.2485L17.4641 93.2485Z"
></path>
<path
fill="#fff"
d="M3.4641 41.2485C1.55093 40.144 0.895431 37.6976 2 35.7844L12 18.4639C13.1046 16.5508 15.5509 15.8953 17.4641 16.9998L24.3923 20.9998L10.3923 45.2485L3.4641 41.2485Z"
></path>
</svg>
</span>
<span class="text">Projects</span>
</button>
کد CSS
.Projects-Button {
width: fit-content;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
padding: 5px 20px;
gap: 10px;
border: none;
border-radius: 10px;
cursor: pointer;
background: linear-gradient(120deg, rgb(150, 86, 199), rgb(98, 47, 138));
transition: all 0.3s;
box-shadow: 0px 10px 10px rgba(144, 0, 255, 0.166);
}
.IconContainer {
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
position: relative;
}
.svgBG {
width: 25px;
height: auto;
}
.svgFG {
width: 9px;
height: auto;
z-index: 2;
position: absolute;
}
.text {
color: rgb(240, 240, 240);
font-weight: 500;
font-size: 16px;
}
.Projects-Button:hover .svgFG {
animation: clockwise 2s linear infinite;
}
.Projects-Button:hover .svgBG {
animation: anti-clockwise 2s linear infinite;
}
@keyframes clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes anti-clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
.Projects-Button:hover {
background-color: rgb(119, 57, 166);
}