پیشنمایش زنده
کد HTML
<button class="Btn">
<div class="sign">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height='fill="currentColor"'
class="bi bi-telegram"
viewBox="0 0 16 16"
>
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09"
></path>
</svg>
<div class="text">Telegram</div>
</div>
</button>
کد CSS
.Btn {
display: flex;
align-items: center;
justify-content: flex-start;
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
cursor: pointer;
position: relative;
overflow: hidden;
transition-duration: 0.3s;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
background-color: #24a1de;
}
.sign {
width: 100%;
transition-duration: 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.sign svg {
width: 25px;
}
.sign svg path {
fill: white;
}
.text {
position: absolute;
right: 0%;
width: 0%;
opacity: 0;
color: white;
font-size: 1.2em;
font-weight: 600;
transition-duration: 0.3s;
}
.Btn:hover {
width: 150px;
border-radius: 40px;
transition-duration: 0.3s;
}
.Btn:hover .sign {
width: 30%;
transition-duration: 0.3s;
padding-left: 10px;
}
.Btn:hover .text {
opacity: 1;
width: 70%;
transition-duration: 0.3s;
padding-right: 10px;
}
.Btn:active {
transform: translate(2px, 2px);
}