#e8e8e8
1.Btn { 2 width: 45px; 3 height: 45px; 4 border: none; 5 border-radius: 50%; 6 background: linear-gradient(-50deg,rgb(39, 107, 255),rgb(112, 186, 255),rgb(39, 107, 255)); 7 background-size: 250%; 8 background-position: left; 9 display: flex; 10 align-items: center; 11 justify-content: center; 12 cursor: pointer; 13 position: relative; 14 transition-duration: .5s; 15 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11); 16} 17 18.logoIcon { 19 fill: white; 20} 21 22.tooltip { 23 position: absolute; 24 top: -20px; 25 opacity: 0; 26 background: linear-gradient(to right,rgb(39, 107, 255),rgb(108, 184, 255)); 27 color: white; 28 padding: 5px 10px; 29 border-radius: 5px; 30 display: flex; 31 align-items: center; 32 justify-content: center; 33 transition-duration: .2s; 34 pointer-events: none; 35 letter-spacing: 0.5px; 36} 37 38.tooltip::before { 39 position: absolute; 40 content: ""; 41 width: 10px; 42 height: 10px; 43 background: linear-gradient(45deg,rgb(39, 107, 255),rgb(108, 184, 255)); 44 background-size: 1000%; 45 background-position: center; 46 transform: rotate(45deg); 47 bottom: -15%; 48 transition-duration: .3s; 49} 50 51.Btn:hover .tooltip { 52 top: -50px; 53 opacity: 1; 54 transition-duration: .3s; 55} 56 57.Btn:hover { 58 background-position: right; 59 transition-duration: .5s; 60}
716 views
716 views
Comments
MIT License