Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <button id="toggleMessage">
- Toggle Message
- </button>
- <div class="float-container">
- <div id="floating-message">Hello There 👋, chat with us!</div>
- <div id="floating-bubble"></div>
- </div>
- .float-container {
- display: flex;
- position: fixed;
- bottom: 0;
- right: 0;
- }
- #floating-bubble {
- background-color: teal;
- margin-bottom: 20px;
- margin-right: 60px;
- border-radius: 50%;
- width: 50px;
- height: 50px;
- box-shadow: 0 0 20px rgba(0,0,0,.5);
- transition: box-shadow .5s ease-in-out;
- cursor: pointer;
- z-index: 2147483645;
- border-bottom-right-radius: 0;
- background-image: url('https://cdn0.iconfinder.com/data/icons/thin-communication-messaging/57/thin-036_bubble_comment_chat_message-512.png');
- background-position: center;
- background-size: 80%;
- background-repeat: no-repeat;
- border-bottom-right-radius: 0;
- }
- #floating-message {
- margin-right: 15px;
- background: #3a96dd;
- padding: 5px;
- transition: none;
- animation-duration: .5s;
- animation-name: slidein,wiggle;
- animation-iteration-count: 1,4;
- animation-direction: normal,alternate;
- animation-timing-function: ease-in,ease-in-out;
- border-radius: 10px;
- font-size: 14px;
- box-shadow: 0 0 10px #000;
- color: #fff;
- font-family: Calibri, sans-serif;
- }
Add Comment
Please, Sign In to add comment