Я считаю, что маленькие вещи могут доставлять нам большую радость. В моем последнем проекте такой маленькой вещью стала кнопка. Я много читал о веб-дизайне и хотел, чтобы основные кнопки моего веб-проекта не были похожи на массу других, возможно неплохих, кнопок. Ранее я уже видел изображение квадратной кнопки со смещенными границами, но у меня никак не хватало времени на создание такой реализации. Итак, несколько недель я пытался выкроить время, чтобы создать это чудо. И ожидания того стоили.

div или не div

Я рассмотрел несколько способов создания кнопки со смещенными границами. Каждый из них позволял мне избежать создания блока-обертки. Но, в конечном итоге, я хотел создать анимацию, при которой кнопка вставала бы четко в рамки установленных границ.

Если Вас устраивает тот факт, что смещенные границы при анимации будут двигаться вместе с кнопкой, достаточно использовать position: absolute; и z-index: -1; для самой кнопки, а псевдо-селектор ::before - для создания смещенных границ кнопки.

Следует помнить, что CSS-эффекты анимации и переходов не будут работать для ::before в таких браузерах, как IE и Safari.

Так же, для создания эффекта смещенных границ можно использовать box-shadow. Но и в этом случае при создании эффектов анимации границы будут смещаться вместе с самой кнопкой.

Решение

Для начала создадим контейнер div, а с помощью position: relative и left установим этот контейнер в нужном нам положении. Меняя значение свойства left контейнер можно смещать по горизонтали, а с помощью свойств top или bottom - по вертикали. Так же позиционировать контейнер можно и манипулируя значением свойства margin:

.primary-button-container {
  position: relative;
  display: block;
  left: 5px;
  width: 90px;
  margin-top: 30px;
  padding: 30px;
  border: 2px solid #EBCBAD;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
}

Теперь перейдем к самой кнопке:

.primary-button {
  display: block;
  height: 58px;
  width: 82px;
  background-color: #EBCBAD;
  border: solid #EBCBAD;
  border-width: 0 10px;
  color: #123440;
  font-size: 18px;
  margin: -37px 0px -25px -37px;
  padding: 15px;
  padding-left: 10px;
}

И, наконец, создадим анимацию:

.primary-button:active {
  transform: translateY(9px) translateX(9px);
}

Если нужно избавиться от появления обводящей линии при выделении объекта (focus outline), добавим:

button:focus {    
   outline: none;    
}

Теперь можно добавить и другие украшения, например background-color.

Спасибо за внимание

По материалам статьи Abbey Perini “CSS Animated Button with Offset Border”.