پیشنمایش زنده
کد 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>
کد CSS
.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%;
}