پیشنمایش زنده
کد HTML
<button>
<span class="button-content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0H24V24H0z"></path>
<path
fill="currentColor"
d="M12.001 4.529c2.349-2.109 5.979-2.039 8.242.228 2.262 2.268 2.34 5.88.236 8.236l-8.48 8.492-8.478-8.492c-2.104-2.356-2.025-5.974.236-8.236 2.265-2.264 5.888-2.34 8.244-.228z"
></path>
</svg>
Ukraine
</span>
</button>
کد CSS
button {
font-size: 17px;
font-family: inherit;
font-weight: 700;
padding: 4px;
border-radius: 20px;
cursor: pointer;
border: none;
color: black;
box-shadow:
rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
background: linear-gradient(
0deg,
rgba(255, 213, 0, 1) 0%,
rgba(255, 213, 0, 1) 47%,
rgba(0, 91, 187, 1) 47%,
rgba(0, 91, 187, 1) 100%
);
transition: all 0.1s ease-in-out;
}
button:active {
transform: translateY(3px);
box-shadow:
rgba(0, 0, 0, 0.1) 0px 14px 25px -5px,
rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
button .button-content {
display: flex;
align-items: center;
background: white;
padding: 0.7em 1.5em;
padding-left: 1.2em;
border-radius: 16px;
}
button svg {
width: 20px;
height: 20px;
margin-right: 6px;
color: #ff0000;
transition: transform 0.3s;
}
button:hover svg {
transform: scale(1.2);
}