mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
67 lines
1.9 KiB
HTML
67 lines
1.9 KiB
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>
|
|
<style>
|
|
/* From Uiverse.io by vinodjangid07 - Tags: gradient, button, hover effect, premium */
|
|
.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;
|
|
}
|
|
</style>
|