Edit in JSFiddle

<div id="example-button" class="cf">
    <button class="ss-mail">Send</button> <button class="ss-dropdown"></button> 
    <ul>
        <li class="ss-reply"><a href="#">Reply</a></li>
        <li class="ss-right"><a href="#">Forward</a></li>
    </ul>
</div>

.cf{zoom:1;}.cf:before,.cf:after{content:"";display:table;}.cf:after{clear: both;}
[id^="example-"] [class^="ss-"]:before {
  margin-right: 10px;
  font-size: 16px;
  position: relative;
  top: 2px;
}
[id^="example-"], [id^="example-"] button {
  font-size: 16px;
  line-height: 1.5;
  text-transform: none;
}
[id^="example-"]{
  margin: 25px 20px;
}
ul {
  padding: 0;
  margin: 0;
}
#example-button, #example-button button {
  color: #fff;
  position: relative;
  width: 125px;
  font-family: Helvetica, Arial, sans-serif;
}
#example-button button {
  background-color: #866cba;
  border: 0;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  float: left;
  font-weight: 600;
  text-align: left;
  margin: 0;
  padding: 10px;
  width: 90px;
}
#example-button button.ss-dropdown {
  border-radius: 0 6px 6px 0;
  width: 35px;
  height:45px;
  text-align: center;
  float: left;
}
#example-button button:hover {
  background-color: #735fa3;
}
#example-button button:active {
  background-color: #735fa3;
  box-shadow: none;
}
#example-button button.ss-dropdown:before {
  font-size: 12px;
  margin-right: 0;
}
#example-button ul {
  clear: both;
  background-color: #e5e5e5;
  border-radius: 0 0 6px 6px;
  display: none;
  list-style: none;
  padding: 2px 0;
}
#example-button ul li {
  margin: 0 2px 2px;
  padding: 7px 8px;
  border-radius: 3px;
  cursor: pointer;
}
#example-button ul li:last-of-type {
  margin-bottom: 0;
}
#example-button ul li:before {
  color: rgba(52,52,63,.5);
}
#example-button ul li:hover {
  background-color: #fff;
}
#example-button ul li:hover a {
  color: #34343f;
}
#example-button ul a {
  color: rgba(52,52,63,.5);
  text-decoration: none;
}
#example-button.open ul {
  display: block;
}
#example-button.open button {
  border-radius: 6px 0 0 0;
}
#example-button.open button.ss-dropdown {
  background-color: #735fa3;
  border-radius: 0 6px 0 0;
  box-shadow: none;
}

(function(){
  document.getElementById('example-button').querySelector('.ss-mail').addEventListener('click', toggleOpen, false)
  document.getElementById('example-button').querySelector('.ss-dropdown').addEventListener('click', toggleOpen, false)
  function toggleOpen(event){
    var parent = event.target.parentNode
    if (parent.getAttribute('class') === 'cf')
      parent.setAttribute('class', 'cf open')
    else
      parent.setAttribute('class', 'cf')
  }
})();