mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
50 lines
1.2 KiB
HTML
50 lines
1.2 KiB
HTML
<button class="btnCloud">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" class="icon"><path d="M22,15.04C22,17.23 20.24,19 18.07,19H5.93C3.76,19 2,17.23 2,15.04C2,13.07 3.43,11.44 5.31,11.14C5.28,11 5.27,10.86 5.27,10.71C5.27,9.33 6.38,8.2 7.76,8.2C8.37,8.2 8.94,8.43 9.37,8.8C10.14,7.05 11.13,5.44 13.91,5.44C17.28,5.44 18.87,8.06 18.87,10.83C18.87,10.94 18.87,11.06 18.86,11.17C20.65,11.54 22,13.13 22,15.04Z"></path></svg>
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by Peary74 - Tags: button, cloud, save */
|
|
.btnCloud {
|
|
background-color: transparent;
|
|
position: relative;
|
|
fill: rgb(155, 153, 153);
|
|
border: none;
|
|
}
|
|
|
|
.btnCloud::after {
|
|
content: 'SAVE';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: #fff;
|
|
padding: 3px 9px;
|
|
border-radius: 5px;
|
|
transition: 200ms linear;
|
|
transition-delay: 200ms;
|
|
color: black;
|
|
font-size: 13px;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.icon {
|
|
transform: scale(1.4);
|
|
transition: 200ms linear;
|
|
}
|
|
|
|
.btnCloud:hover > .icon {
|
|
transform: scale(1.7);
|
|
}
|
|
|
|
.btnCloud:hover > .icon path {
|
|
fill: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btnCloud:hover::after {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
top: -100%;
|
|
}
|
|
|
|
</style>
|