CSS стили для кнопки

Недавно верстал сайт и в макете была кнопка, стиль которой, предполагал внутреннюю пунктирную линию. Уже после того, как я сверстал макет, решил вернуться и попробовать переверстать эту кнопку. В общем обо всем по-порядку.

Смысл в том, что в макете была вот такая кнопка: btn

Конечно можно было просто спрайтом сделать, но это же не наш метод. Поэтому изначально код кнопки выглядел таким образом:


В классе .cover были определены несколько параметров: background:#fff и padding:5px. Дальше уже для тега <a> я добавил также background, пунктирную линию и прочие стили, включая стили текста. Но вот я закончил верстку и решил вернуться и попробовать сделать эту кнопку не оборачивая ее в <div>. Основной проблемой было сделать отступ от внешнего края до пунктирной линии. После 10 минут поиска вариантов я пришел к следующему коду:

font-size: 18px;
color: #684f40;
text-decoration: none;
background: #fff8dd;
border: 1px #e3dec4 dashed;
padding: 5px 10px;
box-shadow: 5px 5px 0 #fff8dd, -5px -5px 0 #fff8dd, 5px -5px 0 #fff8dd, -5px 5px 0 #fff8dd;

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

Как видите все просто. Недостатком этого способа является то, что внешнюю границу можно задать только цветом. Если стоит задача использовать текстуру в фоне кнопки, то этот способ не подойдет. В этом случае как раз сгодится первый вариант верстки кнопки. Обрамление тега <a> в <div>-контейнер и уже диву задать фон текстурой.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *