当前位置：首页 > backend >正文

【CSS样式】按钮样式

backend 2025/7/2 13:55:35

在这里插入图片描述

源码地址

HTML 部分

<button class="Projects-Button"><span class="IconContainer"><svgxmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 259 259"class="svgBG"><circlestroke-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><linestroke-width="8"stroke="#fff"y2="78.7279"x2="79.3848"y1="63.1716"x1="63.8284"></line><linestroke-width="8"stroke="#fff"y2="194.728"x2="195.385"y1="179.172"x1="179.828"></line><linestroke-width="8"stroke="#fff"y2="58"x2="130"y1="36"x1="130"></line><linestroke-width="8"stroke="#fff"y2="64.1715"x2="194.314"y1="78.3137"x1="180.172"></line><linestroke-width="8"stroke="#fff"y2="180.172"x2="78.3137"y1="194.314"x1="64.1716"></line><linestroke-width="8"stroke="#fff"y2="223"x2="130"y1="201"x1="130"></line><linestroke-width="8"stroke="#fff"y2="129"x2="223"y1="129"x1="201"></line><linestroke-width="8"stroke="#fff"y2="129"x2="58"y1="129"x1="36"></line></svg><svgxmlns="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><pathfill="#fff"d="M41 4C41 1.79086 42.7909 0 45 0H65C67.2091 0 69 1.79086 69 4V12H41V4Z"></path><pathfill="#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><pathfill="#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><pathfill="#fff"d="M69 106C69 108.209 67.2091 110 65 110L45 110C42.7909 110 41 108.209 41 106L41 98L69 98V106Z"></path><pathfill="#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><pathfill="#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);
}