<div class="multi-button">
  <button class="outer-left"><svg style="width:16px;height:16px" viewBox="0 0 24 24">
    <path fill="#000000" d="M19,3L13,9L15,11L22,4V3M12,12.5A0.5,0.5 0 0,1 11.5,12A0.5,0.5 0 0,1 12,11.5A0.5,0.5 0 0,1 12.5,12A0.5,0.5 0 0,1 12,12.5M6,20A2,2 0 0,1 4,18C4,16.89 4.9,16 6,16A2,2 0 0,1 8,18C8,19.11 7.1,20 6,20M6,8A2,2 0 0,1 4,6C4,4.89 4.9,4 6,4A2,2 0 0,1 8,6C8,7.11 7.1,8 6,8M9.64,7.64C9.87,7.14 10,6.59 10,6A4,4 0 0,0 6,2A4,4 0 0,0 2,6A4,4 0 0,0 6,10C6.59,10 7.14,9.87 7.64,9.64L10,12L7.64,14.36C7.14,14.13 6.59,14 6,14A4,4 0 0,0 2,18A4,4 0 0,0 6,22A4,4 0 0,0 10,18C10,17.41 9.87,16.86 9.64,16.36L12,14L19,21H22V20L9.64,7.64Z" />
</svg>Cut</button>
  <button><svg style="width:16px;height:16px" viewBox="0 0 24 24">
    <path fill="#000000" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
</svg>Copy</button>
  <button class="outer-right"><svg style="width:16px;height:16px" viewBox="0 0 24 24">
    <path fill="#000000" d="M19,20H5V4H7V7H17V4H19M12,2A1,1 0 0,1 13,3A1,1 0 0,1 12,4A1,1 0 0,1 11,3A1,1 0 0,1 12,2M19,2H14.82C14.4,0.84 13.3,0 12,0C10.7,0 9.6,0.84 9.18,2H5A2,2 0 0,0 3,4V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V4A2,2 0 0,0 19,2Z" />
</svg>Paste</button>
</div>
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.multi-button {
  border-radius:6px;
  font-size:0;
  box-shadow: 6px 6px 2px 1px rgba(0, 0, 255, .2);
}

button {
  font-family: Lato, sans-serif;
  outline:none;
  display:inline-flex;
  place-items: center;
  font-family: Lato, sans-serif;
  font-weight:bold;
  background-color:#eeeeee;
  border:none;
  color:#222222;
  cursor:pointer;
  padding:10px;
  transition: background-color .4s ;
}

button:hover {
  background-color:#dddddd;
  transform : translate(0, 1px);
}

button:active {
  background-color:#cccccc;
  transform : translate(0, 2px);
}


button + button {
  margin-left:0;
}

.outer-left {
   border-radius : 6px 0 0 6px;
}

.outer-right {
  border-radius : 0 6px 6px 0; 
}

svg {
  margin-right:5px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.