Активная кнопка на сайте?

Question

[unlik]

Здравствуйте. Имеется на сайте несколько кнопок. Для активной задан border 2 пикселя. Но так как бордер добавляется на внешней части кнопки, она получается немного выше по размеру. А нужно чтобы осталась такой же. Как можно решить?

Answer 1

[iBird Rose]

сразу задавать 2px бордер. но изначально чтобы он был transparent, либо под цвет кнопки, а потом уже менять ему цвет

Answer 2

[Олег]

box-shadow: inset 0 0 0 2px red;

Comments

[unlik]

В таком случае покругу рамка. А так да как нужно.

Answer 3

[Neyury]

Варианты:
1. Сделать у не активных кнопок border такого же размера, но прозрачные (либо цветом фона кнопки)
2. Сделать у не активных кнопок margin равный размеру бордера у активной кнопки
3. Использовать outline, а не border
4. Использовать не border, а внутреннюю тень