Недавно верстал сайт и в макете была кнопка, стиль которой, предполагал внутреннюю пунктирную линию. Уже после того, как я сверстал макет, решил вернуться и попробовать переверстать эту кнопку. В общем обо всем по-порядку.
Смысл в том, что в макете была вот такая кнопка:
Конечно можно было просто спрайтом сделать, но это же не наш метод. Поэтому изначально код кнопки выглядел таким образом:
В классе .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>-контейнер и уже диву задать фон текстурой.