<!Doctype html>
<html>
<style>
.btn-group button {
  background-color: black; /* black background */
  border: 1px solid blue; /* blue border */
  color: purple; /* purple text */
  padding: 10px 28px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: yellow;
}
</style>
<body>

<h1>Button Group</h1>

<div class="btn-group">
  <button>cut</button>
  <button>Copy</button>
  <button>Paste</button>
</div>

</body>
</html>
 




<div class="multi-button">
  <button>Cut</button>
  <button>Copy</button>
  <button>Paste</button>
</div>
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.