Кнопка для сайта в стиле минимализм
Красивая кнопка со сдвоенной рамкой, которая при наведении трансформируется в единое целое.
HTML разметка
CSS оформление
.min-b {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background: #FAFAFA;
}
.min-b button {
padding: 20px 40px;
background: none;
border: none;
position: relative;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 3px;
cursor: pointer;
}
.min-b button:after, .min-b button:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 2px solid #000;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}
.min-b button:after {
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px);
}
.min-b button:before {
-webkit-transform: translate(-3px, -3px);
transform: translate(-3px, -3px);
}
.min-b button:hover:after, .min-b button:hover:before {
-webkit-transform: translate(0);
transform: translate(0);
}
Комментарии ()