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