59 views
CSSAdd prefixes
1.btnCloud { 2 background-color: transparent; 3 position: relative; 4 fill: rgb(155, 153, 153); 5 border: none; 6} 7 8.btnCloud::after { 9 content: 'SAVE'; 10 position: absolute; 11 top: -50%; 12 left: 50%; 13 transform: translateX(-50%); 14 background-color: #fff; 15 padding: 3px 9px; 16 border-radius: 5px; 17 transition: 200ms linear; 18 transition-delay: 200ms; 19 color: black; 20 font-size: 13px; 21 visibility: hidden; 22} 23 24.icon { 25 transform: scale(1.4); 26 transition: 200ms linear; 27} 28 29.btnCloud:hover > .icon { 30 transform: scale(1.7); 31} 32 33.btnCloud:hover > .icon path { 34 fill: #fff; 35 cursor: pointer; 36} 37 38.btnCloud:hover::after { 39 visibility: visible; 40 opacity: 1; 41 top: -100%; 42} 43
HTML
1<button class="btnCloud"> 2 <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> 3</button> 4