پیشنمایش زنده
کد HTML
<button class="Btn">
<div class="sign">
<svg
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
>
<path
d="M603.733333 181.333333L386.133333 401.066667c-6.4 6.4-10.666667 14.933333-12.8 25.6l-51.2 211.2c-8.533333 38.4 23.466667 74.666667 61.866667 64l200.533333-53.333334c8.533333-2.133333 17.066667-6.4 23.466667-14.933333l234.666667-236.8V853.333333c0 40.533333-32 72.533333-70.4 74.666667H170.666667c-40.533333 0-74.666667-34.133333-74.666667-74.666667V256c0-40.533333 34.133333-74.666667 74.666667-74.666667h433.066666z"
fill="#ffffff"
></path>
<path
d="M738.133333 147.2L435.2 448c-4.266667 4.266667-6.4 8.533333-8.533333 14.933333l-32 125.866667c-6.4 23.466667 14.933333 44.8 38.4 38.4l128-29.866667c6.4-2.133333 10.666667-4.266667 14.933333-8.533333l300.8-302.933333c38.4-38.4 38.4-102.4 0-140.8s-100.266667-38.4-138.666667 2.133333z"
fill="#ffffff"
></path>
</svg>
</div>
<div class="comment">
<svg
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
>
<path
d="M847.800487 81.619926 175.537434 81.619926c-61.883419 0-112.049982 53.165874-112.049982 118.745475l0 445.234387c0 65.579601 51.299363 126.017088 114.594945 126.017088l170.742732 0c29.764907 32.380478 152.938228 162.667823 152.938228 162.667823 5.476735 5.807263 14.334473 5.807263 19.808138 0 0 0 90.184999-104.464213 148.947334-162.667823l174.736697 0c63.294558 0 114.594945-60.454884 114.594945-126.017088L959.850469 200.3654C959.850469 134.785799 909.68493 81.619926 847.800487 81.619926zM287.587416 497.193783c-30.950919 0-56.024991-26.574239-56.024991-59.373249 0-32.797987 25.073048-59.372226 56.024991-59.372226 30.933523 0 56.006572 26.574239 56.006572 59.372226C343.593987 470.620567 318.520939 497.193783 287.587416 497.193783zM511.667937 497.193783c-30.931476 0-56.023968-26.574239-56.023968-59.373249 0-32.797987 25.092491-59.372226 56.023968-59.372226 30.933523 0 56.024991 26.574239 56.024991 59.372226C567.692928 470.620567 542.60146 497.193783 511.667937 497.193783zM735.768925 497.193783c-30.950919 0-56.024991-26.574239-56.024991-59.373249 0-32.797987 25.074072-59.372226 56.024991-59.372226 30.9325 0 56.024991 26.574239 56.024991 59.372226C791.793916 470.620567 766.700401 497.193783 735.768925 497.193783z"
fill="#ffffff"
></path>
</svg>
</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: rgb(255, 65, 65);
}
/* plus sign */
.sign {
width: 100%;
transition-duration: 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
/* text */
.comment {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
right: 0%;
width: 0%;
opacity: 0;
color: white;
font-size: 1.2em;
font-weight: 600;
transition-duration: 0.3s;
}
/* hover effect on button width */
.Btn:hover {
width: 120px;
border-radius: 40px;
transition-duration: 0.3s;
}
.Btn:hover .sign {
width: 50%;
transition-duration: 0.3s;
padding-left: 20px;
}
/* hover effect button's text */
.Btn:hover .comment {
opacity: 1;
width: 50%;
transition-duration: 0.3s;
padding-right: 10px;
}
/* button click effect*/
.Btn:active {
transform: translate(2px, 2px);
}