<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="chatbar">
<div class="control">
<a>
<svg>
<use xlink:href="#plus">
</svg>
</a>
<div class="text">
<input type="text" placeholder="Message">
</div>
<ul class="list">
<li>
<a href="">
<svg>
<use xlink:href="#video">
</svg>
</a>
</li>
<li>
<a href="">
<svg>
<use xlink:href="#photo">
</svg>
</a>
</li>
<li>
<a href="">
<svg>
<use xlink:href="#image">
</svg>
</a>
</li>
</ul>
</div>
</nav>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="video" fill="none" stroke="currentColor">
<polygon points="23 7 16 12 23 17 23 7"></polygon>
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="photo" fill="none" stroke="currentColor">
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
<circle cx="12" cy="13" r="4"></circle>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="image" fill="none" stroke="currentColor">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="plus" fill="none" stroke="currentColor">
<g stroke-linecap="round" stroke-linejoin="round" stroke-width="1" transform="translate(0.5px 0.5px)">
<line stroke-miterlimit="10" x1="12" y1="7" x2="12" y2="17"></line>
<line stroke-miterlimit="10" x1="17" y1="12" x2="7" y2="12"></line>
</g>
</symbol>
</svg>
<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/6167953-Chat-Bar-Interaction" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
.chatbar {
--primary: #275EFE;
--shadow: rgba(39, 94, 254, .2);
width: 276px;
position: relative;
padding: 20px;
border-radius: 42px;
background: var(--primary);
overflow: hidden;
-webkit-transform-origin: 42px 50%;
transform-origin: 42px 50%;
box-shadow: 0 32px 48px -8px var(--shadow);
}
.chatbar .control {
--rotate: 0deg;
position: relative;
-webkit-transform-origin: 22px 22px;
transform-origin: 22px 22px;
transition: -webkit-transform .45s ease;
transition: transform .45s ease;
transition: transform .45s ease, -webkit-transform .45s ease;
-webkit-transform: rotate(var(--rotate));
transform: rotate(var(--rotate));
}
.chatbar .control > a {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
cursor: pointer;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
}
.chatbar .control > a svg {
width: 28px;
height: 28px;
display: block;
color: #fff;
}
.chatbar .control .text,
.chatbar .control .list {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 0 0 0 64px;
-webkit-transform-origin: 22px 50%;
transform-origin: 22px 50%;
}
.chatbar .control .text {
top: -4px;
}
.chatbar .control .text input {
line-height: 24px;
padding: 14px 22px;
border: 0;
border-radius: 26px;
background: rgba(255, 255, 255, 0.2);
display: block;
color: #fff;
font-size: 18px;
outline: none;
width: 100%;
}
.chatbar .control .text input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.4);
opacity: 1;
}
.chatbar .control .text input:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.4);
opacity: 1;
}
.chatbar .control .text input::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.4);
opacity: 1;
}
.chatbar .control .text input::placeholder {
color: rgba(255, 255, 255, 0.4);
opacity: 1;
}
.chatbar .control .list {
margin: 0;
list-style: none;
display: flex;
justify-content: space-between;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.chatbar .control .list li {
--y: 0;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease;
-webkit-transform: translateY(var(--y));
transform: translateY(var(--y));
}
.chatbar .control .list li a {
display: flex;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
}
.chatbar .control .list li a svg {
width: 20px;
height: 20px;
display: block;
color: #fff;
stroke-linecap: round;
stroke-width: 1.2;
stroke-linejoin: round;
}
.chatbar .control .list li:nth-child(2) {
--y: 8px;
}
.chatbar .control .list li:nth-child(3) {
--y: 16px;
}
.chatbar.active {
-webkit-animation: top 1s ease-in-out forwards;
animation: top 1s ease-in-out forwards;
}
.chatbar.active .control {
--rotate: -135deg;
}
.chatbar.active .control .list li {
--y: 0;
}
.chatbar.active.default {
-webkit-animation: down 1s ease-in-out forwards;
animation: down 1s ease-in-out forwards;
}
.chatbar.active.default .control {
--rotate: 0deg;
}
@-webkit-keyframes top {
0%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%,
60% {
-webkit-transform: rotate(-6deg);
transform: rotate(-6deg);
}
88% {
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
}
}
@keyframes top {
0%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%,
60% {
-webkit-transform: rotate(-6deg);
transform: rotate(-6deg);
}
88% {
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
}
}
@-webkit-keyframes down {
0%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%,
60% {
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
88% {
-webkit-transform: rotate(-1deg);
transform: rotate(-1deg);
}
}
@keyframes down {
0%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%,
60% {
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
88% {
-webkit-transform: rotate(-1deg);
transform: rotate(-1deg);
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #E4ECFA;
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
height: 28px;
}
$('.chatbar .control > a').on('click touch', function(e) {
e.preventDefault();
let parent = $(this).parent().parent();
if(parent.hasClass('active')) {
parent.addClass('default');
setTimeout(() => {
parent.removeClass('active default');
}, 1000);
} else {
parent.addClass('active');
}
});
