.container {
padding-left: 8px;
padding-right: 8px;
}
.wrap {
margin-left: -8px;
margin-right: -8px;
}
.block {
box-sizing: border-box;
width: 25%;
float: left;
padding-left: 8px;
padding-right: 8px;
margin-bottom: 16px;
}/**
* [1] - регулировка размера контейнера
* [2] - изображение растягивается по контейнеру
*/
.block {
position: relative;
}
.block:before {
content: "";
display: block;
width: 100%;
padding-top: 100%; /* [1] */
}
/* [2] */
.block__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<!-- обычная кнопка -->
<a href="#" class="btn">
<span class="btn__inner">Button</span>
</a>
<!-- кнопка с отменой цвета -->
<a href="#" class="btn btn_disabled">
<span class="btn__inner">Button</span>
</a>.btn {
display: inline-block;
vertical-align: middle;
line-height: 1;
text-decoration: none;
color: #ccc;
background: #333;
}
.btn__inner {
display: block;
padding: 15px 20px;
background: inherit;
}
.btn:hover .btn__inner {
background: #575757;
}
.btn_disabled:hover .btn__inner {
background: inherit;
}