پیشنمایش زنده
کد HTML
<button>
<svg data-name="Layer 1" id="addad26c-c76f-4459-b531-8d2782d63202" viewBox="0 0 750 750" xmlns="http://www.w3.org/2000/svg"><defs></defs><path class="ae7b52d5-c285-49b3-846b-b956f860d49b" d="M405.51,571.13V392.43h61l8.72-69.74H405.51V279.12c0-19.61,6.54-34.86,34.87-34.86h37V181.05c-8.72,0-30.51-2.18-54.44-2.18-52.3,0-89.35,32.69-89.35,91.53v52.29H272.58v69.74h61v178.7Z" data-name="Path 1" id="fa3a6b04-de12-4b8c-b3fa-3825c59e9db7"></path></svg>
<span class="label">Share</span>
</button>
کد CSS
button {
width: 100px;
height: 32px;
background-color: #4267B2;
border-radius: 4px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
padding: 0 8px;
justify-content: space-between;
transition: all 0.3s;
}
button:hover {
opacity: 0.85;
transform: translateY(-4px);
}
button .label {
font-size: 12px;
line-height: 32px;
color: #fff;
font-weight: 700;
letter-spacing: 1px;
margin: 0 auto;
}
button svg {
fill: #fff;
width: 25px;
height: 25px;
}