Красивая кнопка со сдвоенной рамкой, которая при наведении трансформируется в единое целое.
.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); }
Комментарии ()