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

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

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

Сейчас в мировом веб-дизайне по-большей части преобладает плоский стиль оформления интерфейса пользовательских элементов управления. Плоские панели навигации, блоки с содержанием и конечно же, неотъемлемый элемент любого сайта — . Я нераз уже подробно расписывал варианты создания кнопок с помощью , разных форм и расцветок. Сегодня хочу показать вам простейший пример создания большой объёмной в стиле 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, и так далее...

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

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

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

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

2 комментария
  1. NeedHate:

    Шикарно!.. а если она будет в два раза меньше, будет ли выглядеть так же красиво? *)

    Ответить
    • driver:

      Попробуйте просто уменьшить размер шрифта font-size: и посмотрите)) Если не всё устроит, так же уменьшите отступы padding: Всё будет тип-топ)))

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru