پیشنمایش زنده
کد HTML
<button>
<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M384,336a63.78,63.78,0,0,0-46.12,19.7l-148-83.27a63.85,63.85,0,0,0,0-32.86l148-83.27a63.8,63.8,0,1,0-15.73-27.87l-148,83.27a64,64,0,1,0,0,88.6l148,83.27A64,64,0,1,0,384,336Z"></path></svg>
<span class="label">Share</span>
</button>
کد CSS
button {
width: 100px;
height: 32px;
background-color: #95D03A;
border-radius: 4px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
padding: 0 10px;
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: 17px;
height: 17px;
}