Ну очень большая кнопка в стиле 3D

Сейчас в мировом веб-дизайне по-большей части преобладает плоский стиль оформления интерфейса пользовательских элементов управления. Плоские панели навигации, блоки с содержанием и конечно же, неотъемлемый элемент любого сайта — кнопки. Я нераз уже подробно расписывал варианты создания кнопок с помощью CSS3, разных форм и расцветок. Сегодня хочу показать вам простейший пример создания большой объёмной кнопки в стиле 3D.
Чаще всего в виде кнопок, по разным соображениям, делают стандартные ссылки, формируя в CSS все необходимые стили, напрямую привязывая их через определенный класс к тегу <a>. В примере показан фрагмент кода CSS (сниппет), который можно применять, конечно же, не только к тегу <a>, но и к <button>, <input> и другим.

В принципе, по самому коду особо-то и нечего пояснять, всё предельно просто и понятно, несколько добавленных универсальных свойств, и обычная плоская кнопка превращается в объёмную. Наверное стоит только пояснить по поводу размеров кнопки, а размер у нашей кнопки будет не фиксированный и зависит от выбранных размеров шрифта font-size:, то есть при увеличении, или уменьшении значений размеров шрифта, размер кнопки будет меняться автоматом. Достигается это за счёт предустановленных отступов в свойстве padding:.

Текст кнопки разбит на составляющие с различным оформлением через тег <span>, которому сформированы свои стили в css. В результате мы получаем вот такую, ну-у очень большую, синюю кнопку, с элементами 3D в оформлении и привлекательным визуальным эффектом, с помощью псевдокласса :active, при нажатии:

Для того чтобы ссылка приняла такой вид, достаточно к тегу <a> добавить class="button", текст ссылки разбить тегом <span class="submit">, всё вместе в html это будет выглядеть так:

<a href="#" class="button"><span class="submit">Нажми</span> меня<span class="submit">!</span></a>

Все стили формируются в CSS с помощью свойств класса .button. Практически для каждого свойства прописал комментарии, так что, думаю несложно будет разобраться, что, куда и зачем. Захотите видеть кнопку другого цвета, экспериментируйте со значениями background-color, не забывая при этом, о цветах внешней тени box-shadow. Хотите кнопку меньших размеров, изменяете значения свойства font-size и регулируете внутренние отступы в свойстве padding, и так далее…

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

Источник: Где-то там, у буржуинов, в хаосе сниппетов.

С уважением, Андрей.