پیشنمایش زنده
کد HTML
<button>
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="33" viewBox="0 0 72 72" height="33"><g fill-rule="evenodd" fill="none"><path fill="#cc2127" d="m36 72c19.882251 0 36-16.117749 36-36 0-19.882251-16.117749-36-36-36-19.882251 0-36 16.117749-36 36 0 19.882251 16.117749 36 36 36z"></path><path fill="#fff" d="m39.2423809 46.6909141c-2.9709533 0-5.7656768-1.6109509-6.7232439-3.4375287 0 0-1.5985444 6.3516155-1.9354084 7.5781882-1.1899408 4.3328486-4.6958217 8.6688222-4.9687439 9.0219502-.1887062.2484395-.6082266.1703139-.6518942-.1546888-.0764182-.5531296-.9700435-6.0203627.0810969-10.4797748.5271298-2.2390812 3.5401911-15.0235627 3.5401911-15.0235627s-.8795894-1.7609522-.8795894-4.3625364c0-4.0859715 2.3642862-7.135997 5.308727-7.135997 2.5015271 0 3.7117422 1.8828282 3.7117422 4.139097 0 2.521896-1.6032231 6.2891149-2.4313471 9.7844566-.687764 2.9250243 1.4675418 5.3094192 4.3433622 5.3094192 5.2135941 0 8.7257131-6.7094309 8.7257131-14.6594971 0-6.0406754-4.059523-10.5641506-11.4502566-10.5641506-8.3451817 0-13.5494184 6.2359895-13.5494184 13.2047976 0 2.40002.7080382 4.0969091 1.8168821 5.406295.5099747.60313.5801547.8453196.3961271 1.5359503-.1341217.5078167-.4351159 1.7297019-.5614399 2.214081-.1840276.6984433-.7485867.9484454-1.3786471.6890682-3.8411853-1.5703256-5.6362337-5.7906733-5.6362337-10.5329003 0-7.8313152 6.5953603-17.223581 19.6691143-17.223581 10.5067256 0 17.4217948 7.6156885 17.4217948 15.7938816 0 10.8172777-6.0011697 18.8970325-14.8485282 18.8970325"></path></g></svg></span>
<span class="text1">Follow me</span>
<span class="text2">1,2k</span>
</button>
کد CSS
button {
position: relative;
width: 130px;
height: 35px;
border-radius: 30px;
background-color: white;
border: 1px #cc2127 solid;
overflow: hidden;
}
.text1 {
font-size: 15px;
font-weight: 600;
margin-left: 22%;
}
.text2 {
position: absolute;
top: 25%;
left: -50px;
font-weight: 700;
font-size: 14px;
color: white;
}
.icon {
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s;
}
.icon::before {
position: absolute;
left: -100px;
top: 0;
z-index: -1;
content: '';
width: 130px;
height: 33px;
border-radius: 30px;
background-color: #cc2127;
}
button:hover .icon {
transform: translateX(96px);
transition: transform 0.5s;
}
button:hover .text2 {
transform: translateX(100px);
transition: transform 0.6s;
}
button:active {
transform: scale(1.03);
}