پیشنمایش زنده
کد 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="#ff5700" 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="m43.14 42.3258026c-1.794 0-3.3015-1.441736-3.3015-3.2193817 0-1.7776456 1.5075-3.2669441 3.3015-3.2669441s3.249 1.4892985 3.249 3.2669441c0 1.7776457-1.455 3.2193817-3.249 3.2193817m.762 6.2485137c-1.671 1.6542806-4.248 2.4583829-7.878 2.4583829-.0075 0-.0165-.0014864-.0255-.0014864-.0075 0-.0165.0014864-.0255.0014864-3.63 0-6.2055-.8041023-7.875-2.4583829-.513-.5083234-.513-1.3302616 0-1.8370987.5115-.5068371 1.341-.5068371 1.854 0 1.152 1.1414982 3.1215 1.6973841 6.021 1.6973841.009 0 .018.0014863.0255.0014863.009 0 .018-.0014863.0255-.0014863 2.8995 0 4.8705-.5558859 6.024-1.6973841.513-.5083234 1.3425-.5068371 1.854 0 .5115.5083234.5115 1.3302616 0 1.8370987m-18.291-9.4678954c0-1.7761593 1.5045-3.2669441 3.297-3.2669441 1.794 0 3.249 1.4907848 3.249 3.2669441 0 1.7776457-1.455 3.2193817-3.249 3.2193817-1.7925 0-3.297-1.441736-3.297-3.2193817m26.385-20.5083234c1.215 0 2.2035.9794887 2.2035 2.1819263 0 1.2039239-.9885 2.1834126-2.2035 2.1834126s-2.2035-.9794887-2.2035-2.1834126c0-1.2024376.9885-2.1819263 2.2035-2.1819263m8.004 16.9723543c0-3.152497-2.5875-5.716409-5.769-5.716409-1.377 0-2.6415.4815696-3.6345 1.2826992-3.5175-2.1908443-7.9815-3.5107016-12.7665-3.7901308l2.496-7.8195601 6.8595 1.6007729c.18 2.4747325 2.268 4.4337099 4.8105 4.4337099 2.6595 0 4.824-2.1447681 4.824-4.7815101 0-2.6352557-2.1645-4.7800238-4.824-4.7800238-1.86 0-3.477 1.049346-4.2825 2.5817479l-7.971-1.8593936c-.6675-.1560642-1.3425.2244352-1.5495.8724733l-3.099 9.7057075c-5.1555.1248513-10.002 1.4491676-13.7775 3.7678359-.9795-.7595125-2.211-1.2143282-3.5475-1.2143282-3.1815 0-5.769 2.563912-5.769 5.716409 0 1.9485732.99 3.6712248 2.4975 4.7027349-.063.4533294-.096.9096314-.096 1.3718787 0 3.9402497 2.3115 7.6055291 6.5085 10.31956 4.023 2.6025565 9.348 4.0353746 14.9925 4.0353746s10.9695-1.4328181 14.9925-4.0353746c4.197-2.7140309 6.5085-6.3793103 6.5085-10.31956 0-.4206302-.0285-.8382878-.081-1.2529727 1.608-1.0151605 2.6775-2.7972651 2.6775-4.8216409"></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 #ff5700 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: #ff5700;
}
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);
}