پیشنمایش زنده
کد HTML
<button>
<svg data-name="Layer 1" id="be27416d-5077-4105-8bd6-c595a921492e" viewBox="0 0 750 750" xmlns="http://www.w3.org/2000/svg"><path d="M273.82,404.37c4.94,2,9.37.09,10.8-5.38,1-3.78,3.36-13.34,4.41-17.32,1.45-5.41.88-7.31-3.11-12-8.68-10.25-14.23-23.53-14.23-42.31,0-54.5,40.78-103.3,106.2-103.3,57.91,0,89.73,35.4,89.73,82.67,0,62.18-27.52,114.66-68.38,114.66-22.57,0-39.45-18.66-34.05-41.53,6.5-27.32,19.05-56.82,19.05-76.54,0-17.66-9.47-32.39-29.09-32.39-23.06,0-41.6,23.87-41.6,55.83,0,20.36,6.89,34.14,6.89,34.14s-23.61,100-27.75,117.52c-8.24,34.87-1.24,77.63-.64,81.95a2.86,2.86,0,0,0,5.12,1.25c2.13-2.78,29.61-36.71,38.94-70.59,2.64-9.59,15.18-59.28,15.18-59.28,7.48,14.29,29.39,26.88,52.68,26.88,69.34,0,116.37-63.2,116.37-147.81,0-64-54.18-123.55-136.54-123.55-102.48,0-154.14,73.46-154.14,134.72C229.66,359.09,243.7,392.09,273.82,404.37Z"></path></svg>
<span class="label">Pin</span>
</button>
کد CSS
button {
width: 100px;
height: 32px;
background-color: #CB2027;
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: 30px;
height: 30px;
}