پیشنمایش زنده
کد HTML
<button class="button">
<svg stroke="#ffffff" xml:space="preserve" viewBox="-143 145 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" fill="#ffffff"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path d="M329,145h-432c-22.1,0-40,17.9-40,40v432c0,22.1,17.9,40,40,40h432c22.1,0,40-17.9,40-40V185C369,162.9,351.1,145,329,145z M169.5,357.6l-2.9,38.3h-39.3v133H77.7v-133H51.2v-38.3h26.5v-25.7c0-11.3,0.3-28.8,8.5-39.7c8.7-11.5,20.6-19.3,41.1-19.3 c33.4,0,47.4,4.8,47.4,4.8l-6.6,39.2c0,0-11-3.2-21.3-3.2c-10.3,0-19.5,3.7-19.5,14v29.9H169.5z"></path> </g></svg>
Continue with Facebook
</button>
کد CSS
.button {
display: flex;
background-color: #039be5;
background-image: linear-gradient(to top right, #0163E0,#18ACFE);
color: #ffffff;
padding: 0.5rem 1.4rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
text-align: center;
vertical-align: middle;
align-items: center;
border-radius: 0.5rem;
gap: 0.75rem;
border: none;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
cursor: pointer;
transition: .6s ease;
}
.button svg {
height: 30px;
}
.button:hover {
box-shadow: none;
}