پیشنمایش زنده
کد HTML
<button class="button">
<svg fill="white" height="1.5em" class="svgIcon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path></svg>
<span class="tooltip">Info</span>
</button>
کد CSS
.button {
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background-color: rgb(32, 32, 32);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5) inset;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
}
.svgIcon {
z-index: 2;
}
.button::before {
width: 35px;
height: 22px;
background: linear-gradient(to bottom,rgba(255, 255, 255, 0.575), rgba(0, 0, 0, 0.103));
position: absolute;
content: "";
top: 3.6px;
border-radius: 50%;
z-index: 1;
}
.tooltip {
position: absolute;
top: -40px;
opacity: 0;
background-color: rgb(134, 134, 134);
color: white;
padding: 5px 10px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
transition-duration: .5s;
pointer-events: none;
letter-spacing: 0.5px;
}
.button:hover .tooltip {
opacity: 1;
transition-duration: .5s;
}
.button:hover {
background-position: right;
transition-duration: 1s;
}