<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.