// source https://jsbin.com/menatuseru

index.html

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
<style>
  #buttonContainer{
    position: fixed;
    z-index: 107158;
    height: 200px;
    width: 40px;
    top:100px;
    right:-2px;
  }

  .sideButton{
    position: relative;
    background-position: left bottom;
    background-color: rgb(99, 46, 130);
    border-color: transparent;
    border-radius: 3px;
    width: 40px;
    height: 110px;
    cursor: pointer;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    -webkit-box-shadow: 10px 10px 31px -16px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 31px -16px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 31px -16px rgba(0,0,0,0.75);
  }
  
  .sideButton:hover{
    background-color:rgb(159, 111, 188);
  }

  #chatButton{
    border: solid 2px rgb(255, 255, 255);
  }

  #feedbackButton{
    background-color: white!important;
    border: solid 2px rgb(99, 46, 130);
  }
  
  #feedbackButton:hover{
     background-color:rgb(250, 230, 255)!important;
  }

  #sidebuttonChat{
    background-color;
  }

  .fa{
    color: white;
  }

  .sidebuttonTextChat{
    font-size: 14px;
    color: white;
    display: block;
    transform: rotate(-90deg);
  	transform-origin: left top 0;
    position: relative;
    top: 25px;
    left: 1px;
    -webkit-font-smoothing: antialiased;
  }

.sidebuttonTextFeedback{
  font-size: 14px;
  color: white;
  display: block;
  transform: rotate(-90deg);
	transform-origin: left top 0;
  position: relative;
  top: 40px;
  left: 1px;
  color: rgb(99, 46, 130);
  -webkit-font-smoothing: antialiased;
  font-smooth: 
}


.sidebuttonIconFeedback{
  display: block!important;
  position: relative!important;
  top: -15px!important;
  color: rgb(99, 46, 130);
}

.sidebuttonIconChat{
  display: block!important;
  position: relative!important;
  top: -15px!important;
}

</style>
<div id="buttonContainer">
  <div class="sideButtonContainer" id="chatButton">
    <button class="sideButton" id="sideButtonChat" onclick="window.usabilla_live("click");">
      <i class="fa fa-comments fa-2x sidebuttonIconChat"></i>
      <p class="sidebuttonTextChat">Chat</p>
    </button>
  </div>
  <div class="sideButtonContainer" >
    <button class="sideButton" id="feedbackButton" onclick="window.usabilla_live("click");">
      <i class="fa fa-commenting fa-2x sidebuttonIconFeedback"></i>
      <p class="sidebuttonTextFeedback">Feedback</p>
    </button>
  </div>
</div>
<script id="jsbin-source-html" type="text/html">
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
<style>
  #buttonContainer{
    position: fixed;
    z-index: 107158;
    height: 200px;
    width: 40px;
    top:100px;
    right:-2px;
  }

  .sideButton{
    position: relative;
    background-position: left bottom;
    background-color: rgb(99, 46, 130);
    border-color: transparent;
    border-radius: 3px;
    width: 40px;
    height: 110px;
    cursor: pointer;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    -webkit-box-shadow: 10px 10px 31px -16px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 31px -16px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 31px -16px rgba(0,0,0,0.75);
  }
  
  .sideButton:hover{
    background-color:rgb(159, 111, 188);
  }

  #chatButton{
    border: solid 2px rgb(255, 255, 255);
  }

  #feedbackButton{
    background-color: white!important;
    border: solid 2px rgb(99, 46, 130);
  }
  
  #feedbackButton:hover{
     background-color:rgb(250, 230, 255)!important;
  }

  #sidebuttonChat{
    background-color;
  }

  .fa{
    color: white;
  }

  .sidebuttonTextChat{
    font-size: 14px;
    color: white;
    display: block;
    transform: rotate(-90deg);
  	transform-origin: left top 0;
    position: relative;
    top: 25px;
    left: 1px;
    -webkit-font-smoothing: antialiased;
  }

.sidebuttonTextFeedback{
  font-size: 14px;
  color: white;
  display: block;
  transform: rotate(-90deg);
	transform-origin: left top 0;
  position: relative;
  top: 40px;
  left: 1px;
  color: rgb(99, 46, 130);
  -webkit-font-smoothing: antialiased;
  font-smooth: 
}


.sidebuttonIconFeedback{
  display: block!important;
  position: relative!important;
  top: -15px!important;
  color: rgb(99, 46, 130);
}

.sidebuttonIconChat{
  display: block!important;
  position: relative!important;
  top: -15px!important;
}

</style>
<div id="buttonContainer">
  <div class="sideButtonContainer" id="chatButton">
    <button class="sideButton" id="sideButtonChat" onclick="window.usabilla_live("click");">
      <i class="fa fa-comments fa-2x sidebuttonIconChat"></i>
      <p class="sidebuttonTextChat">Chat</p>
    </button>
  </div>
  <div class="sideButtonContainer" >
    <button class="sideButton" id="feedbackButton" onclick="window.usabilla_live("click");">
      <i class="fa fa-commenting fa-2x sidebuttonIconFeedback"></i>
      <p class="sidebuttonTextFeedback">Feedback</p>
    </button>
  </div>
</div>
</script>