<div class="contain">
  <div class="item example-3">
    <button class="button">Save Settings</button>
    <button class="button">Submit</button>
    <button class="button">Sign up</button>
  </div>
  <div class="item example-3">
    <button class="button">Save Settings</button>
    <button class="button">Submit</button>
    <button class="button">Sign up</button>
  </div>
  <div class="item example-3">
    <button class="button">Save Settings</button>
    <button class="button">Submit</button>
    <button class="button">Sign up</button>
  </div>
</div>
/*...... Demo Styles ........*/
.example-3 {
  
	.button {
  appearance: none;
  background: #026aa7;
  color: #fff;
  font-size: 20px;
  padding: 0.65em 1em;
  border-radius: 4px;
  box-shadow: inset 0 -4px 0 0 rgba(#000, 0.2);
  margin-right: 1em;
  cursor: pointer;
  &:hover {
    box-shadow: inset 0 -4px 0 0 rgba(#000, 0.6), 0 0 8px 0 rgba(#000, 0.5);
  }
  &:focus {
    position: relative;
    top: 4px;
    box-shadow: inset 0 3px 5px 0 rgba(#000, 0.2);
    outline: 0;
  }
}

	.button:nth-child(2) {
		background: #5aaf4c;
	}

	.button:last-child {
		background: #00bcd4;
	}
}

.item {
  &:nth-child(2) {
    button {
      box-shadow: inset 0 -4px 0 0 rgba(#000, 0.35), 0 0 8px 0 rgba(#000, 0.5);
    }
  }
  
  &:last-child {
    button {
      position: relative;
			top: 4px;
			box-shadow: inset 0 4px 7px 0 rgba(#000, 0.25);
    }
  }
}

/*...... General Styles ........*/

body {
	font-family: 'Arial';
  line-height: 1.4;
}

.contain {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
}

.off-screen {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
}

* {
	box-sizing: border-box;
}

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}

code {
	background: rgba(lightgrey, 0.5);
	display: inline-block;
	padding: 5px;
}

.item {
	margin-bottom: 1.5em;
  text-align: center;
}

input, button {
  border: 0;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.