پیشنمایش زنده
کد HTML
<button class="Btn">
<svg class="logoIcon" height="1em" viewBox="0 0 576 512"><path d="M309 106c11.4-7 19-19.7 19-34c0-22.1-17.9-40-40-40s-40 17.9-40 40c0 14.4 7.6 27 19 34L209.7 220.6c-9.1 18.2-32.7 23.4-48.6 10.7L72 160c5-6.7 8-15 8-24c0-22.1-17.9-40-40-40S0 113.9 0 136s17.9 40 40 40c.2 0 .5 0 .7 0L86.4 427.4c5.5 30.4 32 52.6 63 52.6H426.6c30.9 0 57.4-22.1 63-52.6L535.3 176c.2 0 .5 0 .7 0c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40c0 9 3 17.3 8 24l-89.1 71.3c-15.9 12.7-39.5 7.5-48.6-10.7L309 106z"></path></svg>
<span class="tooltip">Premium</span>
</button>
کد CSS
.Btn {
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
background: linear-gradient(-50deg,rgb(39, 107, 255),rgb(112, 186, 255),rgb(39, 107, 255));
background-size: 250%;
background-position: left;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
transition-duration: .5s;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);
}
.logoIcon {
fill: white;
}
.tooltip {
position: absolute;
top: -20px;
opacity: 0;
background: linear-gradient(to right,rgb(39, 107, 255),rgb(108, 184, 255));
color: white;
padding: 5px 10px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
transition-duration: .2s;
pointer-events: none;
letter-spacing: 0.5px;
}
.tooltip::before {
position: absolute;
content: "";
width: 10px;
height: 10px;
background: linear-gradient(45deg,rgb(39, 107, 255),rgb(108, 184, 255));
background-size: 1000%;
background-position: center;
transform: rotate(45deg);
bottom: -15%;
transition-duration: .3s;
}
.Btn:hover .tooltip {
top: -50px;
opacity: 1;
transition-duration: .3s;
}
.Btn:hover {
background-position: right;
transition-duration: .5s;
}