#e8e8e8
1.chatBtn { 2 width: 55px; 3 height: 55px; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 border-radius: 50%; 8 border: none; 9 background-color: #FFE53B; 10 background-image: linear-gradient(147deg, #FFE53B, #FF2525,#FFE53B); 11 cursor: pointer; 12 padding-top: 3px; 13 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.164); 14 position: relative; 15 background-size: 300%; 16 background-position: left; 17 transition-duration: 1s; 18} 19 20.tooltip { 21 position: absolute; 22 top: -40px; 23 opacity: 0; 24 background-color: rgb(255, 180, 82); 25 color: white; 26 padding: 5px 10px; 27 border-radius: 5px; 28 display: flex; 29 align-items: center; 30 justify-content: center; 31 transition-duration: .5s; 32 pointer-events: none; 33 letter-spacing: 0.5px; 34} 35 36.chatBtn:hover .tooltip { 37 opacity: 1; 38 transition-duration: .5s; 39} 40 41.chatBtn:hover { 42 background-position: right; 43 transition-duration: 1s; 44}
833 views
833 views
Comments
MIT License