Button by DevPTG
#212121
1.chat { 2 display: flex; 3 position: relative; 4} 5 6.background { 7 background-color: #1950ff; 8 border-radius: 50%; 9 box-shadow: 0 2.1px 1.3px rgba(0, 0, 0, 0.044), 10 0 5.9px 4.2px rgba(0, 0, 0, 0.054), 0 12.6px 9.5px rgba(0, 0, 0, 0.061), 11 0 25px 20px rgba(0, 0, 0, 0.1); 12 height: 80px; 13 left: 10px; 14 position: absolute; 15 top: 10px; 16 width: 80px; 17} 18 19.chat-bubble { 20 cursor: pointer; 21 position: relative; 22} 23 24.bubble { 25 transform-origin: 50%; 26 transition: transform 500ms cubic-bezier(0.17, 0.61, 0.54, 0.9); 27} 28 29.line { 30 fill: none; 31 stroke: #ffffff; 32 stroke-width: 2.75; 33 stroke-linecap: round; 34 transition: stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1); 35} 36 37.line1 { 38 stroke-dasharray: 60 90; 39 stroke-dashoffset: -20; 40} 41 42.line2 { 43 stroke-dasharray: 67 87; 44 stroke-dashoffset: -18; 45} 46 47.circle { 48 fill: #ffffff; 49 stroke: none; 50 transform-origin: 50%; 51 transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); 52} 53 54.active .bubble { 55 transform: translateX(24px) translateY(4px) rotate(45deg); 56} 57 58.active .line1 { 59 stroke-dashoffset: 21; 60} 61 62.active .line2 { 63 stroke-dashoffset: 30; 64} 65 66.active .circle { 67 transform: scale(0); 68}
892 views
892 views
MIT License