پیشنمایش زنده
کد HTML
<button class="button">
<svg viewBox="-38 0 332 332" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="none"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <defs> <linearGradient x1="55.1170996%" y1="58.6795405%" x2="63.6801778%" y2="39.5971572%" id="linearGradient-1"> <stop stop-color="#FF9700" offset="0%"> </stop> <stop stop-color="#F48E00" offset="53%"> </stop> <stop stop-color="#D06F00" offset="100%"> </stop> </linearGradient> </defs> <g> <path d="M255.288325,166.794648 C255.288325,162.908052 252.415934,160.666877 248.891046,161.780372 L6.39727934,238.675387 C2.86530029,239.795974 0,243.859878 0,247.73938 L0,326.329461 C0,330.216057 2.86530029,332.464324 6.39727934,331.343737 L248.891046,254.455814 C252.415934,253.335227 255.288325,249.271323 255.288325,245.384729 L255.288325,166.794648 L255.288325,166.794648 Z" fill="url(#linearGradient-1)"> </path> <path d="M5.68434189e-14,164.291056 C5.68434189e-14,168.177652 2.86530029,172.241555 6.39727934,173.362144 L248.926508,250.26425 C252.458487,251.384837 255.323787,249.13657 255.323787,245.257067 L255.323787,166.659893 C255.323787,162.780391 252.458487,158.716487 248.926508,157.595899 L6.39727934,80.693793 C2.86530029,79.5732052 5.68434189e-14,81.8143808 5.68434189e-14,85.7009761 L5.68434189e-14,164.291056 Z" fill="#FF9800"> </path> <path d="M255.288325,5.30235244 C255.288325,1.41575701 252.415934,-0.83251079 248.891046,0.288076943 L6.39727934,77.1759986 C2.86530029,78.2965864 0,82.36049 0,86.2470854 L0,164.837165 C0,168.723761 2.86530029,170.964936 6.39727934,169.851441 L248.891046,92.9564272 C252.415934,91.8358394 255.288325,87.7719358 255.288325,83.8924327 L255.288325,5.30235244 Z" fill="#FF9800"> </path> </g> </g></svg>
<p class="text">Open file</p>
</button>
کد CSS
.button {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 15px;
gap: 15px;
background-color: rgb(66 66 66);
outline: 3px rgb(66 66 66) 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 {
width: 24px;
height: 24px;
}
.button svg path {
transition: 400ms;
}
.button:hover {
background-color: transparent;
}
.button:hover .text {
color: #F48E00;
}
.button:hover svg path:nth-child(1) {
fill: #FF9700;
}
.button:hover svg path:nth-child(2) {
fill: #F48E00;
}
.button:hover svg path:nth-child(3) {
fill: #FF9800;
}