Interactive Messaging Component

index.html

<div class='c-interaction'>
  <button aria-label="Toggle more options." class='c-interaction__toggle c-interaction__button'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><path d="M12 5v14M5 12h14"/></svg></button>
  <label class='vh' for='message'>Message:</label>
<input class='c-interaction__input' type='text' id='messsage' placeholder='Message'>
  
  <div class='c-interaction__menu'>
    <ul>
      <li><button aria-label="Record a Video." class='c-interaction__button'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video"><path d="M23 7l-7 5 7 5V7z"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg></button></li>
      <li><button aria-label="Take a Picture." class='c-interaction__button'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><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"/><circle cx="12" cy="13" r="4"/></svg></button></li>
      <li><button aria-label="Upload an Image." class='c-interaction__button'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg></button></li>
    </ul>
  </div>
</div>

interactive-component.markdown

Interactive Component

https://dribbble.com/shots/6155986-Chat-Bar-Interaction

Quick mock up of a small UI component

A Pen by Ayemun Hossain on CodePen.

License.

script.js

const interaction = document.querySelector('.c-interaction');
const toggleButton = document.querySelector('.c-interaction__toggle')

toggleButton.addEventListener('click',() => {
  interaction.classList.toggle('c-interaction__options')
})

style.scss

$primary: #643CFF;
$secondary:#8364FF;
$bg: #F0EBFF;
$white: #FFFFFF;


*{
  margin:0;
  padding:0;
  outline:none;
}

body {
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:$bg;
}

.c-interaction {
  background-color:$primary;
  width:250px;
  height:50px;
  border-radius:100rem;
  display:flex;
  align-items:center;
  padding:1rem;
  overflow:hidden;
  position:relative;
  transform-origin: 0 0;
  box-shadow: 1px 6px 20px 3px rgba(187, 153, 255, 0.4);
  
  
  &__button {
    border-radius:100rem;
    border:0;
    background:$secondary;
    min-width:50px;
    min-height:50px;
    display:inline-block;
    margin:0;
    cursor:pointer;
    position:relative;
   
    
    &:after{
      content:'';
      width:100%;
      height:100%;
      top:0;
      left:0;
      transform:scale(0);
      background:rgba(100, 75, 198,0.5);
      transition:.15s ease;
      position:absolute;
      border-radius:inherit;
    }
    &:hover {
      svg {
        transform:scale(0.9);
      }
      &:after {
         transform:scale(1);
      } 
    }
    
    svg {
      color:$white;
      z-index:2;
      position:relative;
      transform:scale(1);
      transition:.4s ease;
    }
  }
  
  &__input {

    transition:.6s ease;
    background:$secondary;
    border:0;
    padding:1rem;
    border-radius:100rem;
    width:100%;
    margin-left:1rem;
    color:$white;
    font-size:1rem;
    letter-spacing:1.3px;
    transform:rotate(0deg);
    transform-origin: -68px 0px;
    
    &::placeholder {
      color:#b9f;
    }
  }
  
  &__menu {
    position:absolute;
    left:73px;
    transform:rotate(90deg);
    transform-origin:-200px 10px;
    transition:.4s ease;
   
    ul{
      margin:0;
      padding:0;
      display:flex;
    }
    li {
      margin:0 .5rem;
      list-style:none;
    }
  }
  
  &__options {
    
    input {
      transition:.6s ease;
      transform:rotate(-90deg);
    }
    
    .c-interaction__menu {
      transform:rotate(0);
      transition:.4s ease;
    }
  }
}


.vh {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}