Стили кнопок CSS для обозначения выбранных / невыбранных?

Question

Я использую CSS для создания набора переключаемых кнопок.

Я почти на месте, но я не чувствую, что у меня есть правильные CSS-свойства: http://jsfiddle.net/rrGab/5/

Я думаю, что темная рамка на выбранной кнопке слишком темная и слишком резко очерчена, но я не знаю, как сделать ее более гладкой.

Может кто-нибудь подсказать, как улучшить CSS, чтобы сделать еговыглядеть лучше?

Мне бы хотелось узнать общие принципы CSS, заключающиеся в том, чтобы кнопки «вылетали» из страницы или казались утопленными в нее.

Извините, если StackOverflow не подходит для этого - с удовольствием перенесу его на форум дизайнеров, если это более уместно.

Answer 1

Для утопленного эффекта «высокой печати» вам нужны две разные цветные рамки: одна для верхней части, другая для нижней части, а не сплошная граница. Пожалуйста, обратитесь к этой статье здесь . Эта техника использует text-shadow для создания эффекта с текстом, но я думаю, что вы могли бы использовать философию позади него и применить его к цвету границы.

Я согласен, что сплошная граница на самом деле не делает ее популярной. Что если вы снова сделаете двухцветную рамку, но используете «средний цвет», который ваш градиент создает вверху, и тогда ваша нижняя граница может быть немного темнее, чем нижняя часть вашего градиента?