<div class="boxes">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
</div>
body {
font: normal 16px/1.5 "Helvetica Neue", sans-serif;
background: #1339AC;
color: #fff;
padding: 50px;
margin: 0;
}
.boxes button {
display: block;
width: 100%;
padding: 15px;
border: none;
margin-bottom: 5px;
box-sizing: border-box;
font-size: 1rem;
text-align: center;
text-decoration: none;
background: gold;
color: #000;
}
.boxes button:nth-of-type(even) {
background: #e6c200;
}
.boxes button:focus {
outline: none;
color: #fff;
background: firebrick;
}
@media screen and (min-width: 600px) {
.boxes button {
position: relative;
float: left;
width: 25%;
}
.boxes button:nth-of-type(1) {
left: 75%;
}
.boxes button:nth-of-type(2) {
left: 25%;
}
.boxes button:nth-of-type(3) {
left: -25%;
}
.boxes button:nth-of-type(4) {
left: -75%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.