mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
82 lines
No EOL
1.8 KiB
HTML
82 lines
No EOL
1.8 KiB
HTML
<div class="tooltip-container">
|
|
<span class="tooltip-1">Create your own designs.</span>
|
|
<span class="tooltip-2">Find creative elements.</span>
|
|
<span class="tooltip-3">Participate in challenges.</span>
|
|
<span>UIVERSE</span>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by akshat-patel28 - Tags: tooltip, colorful, color, html, css, css effect, multicolor, button hover effect */
|
|
.tooltip-container {
|
|
position: relative;
|
|
background: #f80254;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
font-size: 17px;
|
|
padding: 14px 26px;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.62),
|
|
inset 0px -2px 3px rgba(0, 0, 0, 0.48), inset 1px 1px 4px #ffffff,
|
|
rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
|
|
rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
}
|
|
|
|
.tooltip-1,
|
|
.tooltip-2,
|
|
.tooltip-3 {
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
font-weight: 800;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: all 0.3s;
|
|
border-radius: 8px 8px 8px 8px;
|
|
background: #ffdb0f;
|
|
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.62),
|
|
inset 0px -2px 3px rgba(0, 0, 0, 0.48), inset 1px 1px 4px #ffffff,
|
|
rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
|
|
rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
|
|
min-width: 180px;
|
|
padding: 8px;
|
|
color: #ac0039;
|
|
font-size: 11px;
|
|
}
|
|
.tooltip-1 {
|
|
top: 0%;
|
|
left: 50%;
|
|
width: 200px;
|
|
}
|
|
.tooltip-2 {
|
|
left: 100%;
|
|
}
|
|
|
|
.tooltip-3 {
|
|
left: 0;
|
|
}
|
|
.tooltip-container:hover .tooltip-1 {
|
|
top: -100%;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
.tooltip-container:hover .tooltip-2 {
|
|
left: -100%;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
.tooltip-container:hover .tooltip-3 {
|
|
left: 200%;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
</style>
|
|
|