پیشنمایش زنده
کد HTML
<button>
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="33" viewBox="0 0 512 512" height="33"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="#3a5ba2" d="m256.23 512c140.58 0 255.77-115.19 255.77-255.77 0-141.046-115.19-256.23-255.77-256.23-141.046 0-256.23 115.184-256.23 256.23 0 140.58 115.184 255.77 256.23 255.77z"></path><path fill="#fff" d="m224.023 160.085c0-35.372 28.575-63.946 63.938-63.946h48.072v63.946h-32.199c-8.608 0-15.873 7.257-15.873 15.873v32.192h48.072v63.938h-48.072v144.22h-63.938v-144.22h-48.065v-63.938h48.065z"></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 #3a5ba2 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: #3a5ba2;
}
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);
}