Создание кнопок для сайта на чистом CSS. Кнопка подробнее для сайта


Кнопки в веб-дизайне

Кнопки в веб дизайне

От автора: я люблю кнопки. С их помощью можно делать множество различных вещей: переходить на следующий этап, принимать различные условия, выполнять что-либо. Кнопки делают сайт интерактивным. Вот почему кнопки, возможно, являются самым важным компонентов в системе проектирования в веб-дизайне.

Все просто, кнопки размечают какую-либо область, чтобы я мог на нее нажать. По существу, именно на кнопках мы применяем основные атрибуты языка дизайна так, что потом это оказывает свое влияние на более сложные компоненты. Ниже я представил 12 уроков, которые я выучил, исходя из работы с первичными (primary button), вторичными (secondary button) кнопками, а также другими типами кнопок.

Первичные кнопки

№1. Определитесь со стилистикой системы

Кнопки – чистейшее атомарное выражение визуального стиля системы. Кнопка состоит из трех неразрывных атрибутов так называемой «большой тройки» — цвет, шрифт и иконография. В кнопках также нужно учитывать пространство: внутренний padding (в частности слева и справа от надписи) и внешний margin (влияющий на другие элементы). Кнопки могут даже затрагивать такие атрибуты, как скругление (или border-radius) и подъем (или box-shadow).

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Вывод: Примите кнопки, как основное представление стилистики системы. Еще лучше если вы задаете кнопку, как набор переменных: цвет, размер, пространство и т.д.

№2. Определите стилистику слов

К нашему счастью кнопки с надписью «Click Here» ушли в прошлое. Но вопросы остаются открытыми: Какой длины должен быть текст кнопки? Стоит ли делать подписи в повелительном наклонении (Сохрани или Закрой)? Нужно ли к глаголу Сохранить добавлять тип объекта (Документ)? Существуют ли какие-либо предпочтения в написании подписей для общих действий? Нужно ли кнопки связывать как-то с брендом… или нет?

Вывод: Найдите в сети гайды с набором готовых кнопок. Список подходящих слов и редакторских стандартов можно найти в руководствах типа Voice и Tone. Кнопки – отличный пример внедрения новых стандартов.

№3. Инвертируйте цвета кнопок если изменяется фон

Большинство кнопок хорошо работают на белом фоне. А будет ли кнопка видна на фотографии или более темном фоне? Можете ли вы разместить кнопку на светлом нейтральном фоне? Хорошо ли видна кнопка на любом фоне? Можете ли вы сменить цвет первичной кнопки?

Вывод: Протестируйте первичную кнопку на возможных фонах и добавьте в код альтернативные стили (белый фон, какой-то другой цвет или полупрозрачность?) на случай, если фон станет темнее. При проектировании создавайте светлые и темные варианты кнопок на возможных фонах для пущей наглядности.

№4. Одна первичная кнопка на странице, если только действие не повторяется

Кнопки призывают к действию. Мы часто используем первичные кнопки для привлечения внимания к самому важному действию на странице. По крайней мере до тех пор, пока мы не начинаем засорять страницу кучей первичных кнопок (хорошо хотя бы что они все похожи).

В некоторых случаях первичные кнопки хорошо подходят: при выборе из параллельных объектов (как набор медиа объектов в поисковой выдаче) или при выборе опций из равных модулей на странице настроек.

Вывод: Определитесь, в каких случаях стоит использовать всего одну первичную кнопку на странице, а в каких больше одной.

№5. Спроектируйте и создайте все виды взаимодействия с кнопкой

Кнопки представляют собой примитивный вид взаимодействия, а взаимодействие приводит к изменениям. Будет некорректно, если вы просто скажете разработчику «Вот дизайн кнопки!» и покажете кнопку на загруженной странице. Дизайнер должен показать внешний вид кнопки во всех возможных состояниях: по умолчанию, при наведении мыши, в фокусе (появляется подсветка к примеру), при нажатии и даже какая-нибудь крутящаяся анимация ожидания или анимированный прогресс бар.

Вывод: Дополняйте живое демо (просто вставьте кнопку на страницу) галереей всех возможных состояний, где пользователю не нужно взаимодействовать с кнопками. Создание документации – это не охота за сокровищами. Еще лучше будет, если вы создадите видео, как в Material Design.

№6. Создавайте кнопки устойчивые к внесению изменений

Сочетание подписей с иконками в кнопках усиливает значение, что ускоряет распознавание. Так, стоять! Я думал кнопки – это подписи с предсказуемой областью для нажатия. При добавлении новых элементов, даже обычной иконки, ваша кнопка не должна рассыпаться. Добавление менее предсказуемых элементов влечет за собой проблемы с пространством и выравниванием, которые вы захотите решить, особенно когда в кнопке можно расположить подпись, иконку и т.д.

Вывод: Будь то с помощью кода или дизайнерских программ создавайте кнопки, устойчивые к добавлению в них дополнительных элементов. Пользователи захотят добавить в кнопки иконки, подписи, да что угодно и не задумываться о проблемах с пространством и выравниванием. Помогите им, сделав эту часть работы за них.

Вторичные кнопки

№7. Вторичная кнопка ≠ отключенная кнопка

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Никому не нравятся серые кнопки. Но вы можете взять для вторичной кнопки чуть более насыщенный цвет первичной кнопки. Нельзя размещать две похожие кнопки рядом. К примеру, зеленый цвет для сохранения и синий для отправки данных на сервер. Ни вы сами, ни ваши пользователи не знают, какой из двух цветов важнее.

И вот вы выбрали нейтральный цвет, близкий к серому. И кнопка похожа на отключенную. Хуже того, если первичная кнопка будет в состоянии disabled, она тоже станет серой. И будет у вас две серых кнопки.

Вывод: Подбирайте цвета вторичной кнопки и отключенной кнопки совместно. Следите за тем, чтобы все ваши варианты сочетались друг с другом и были доступны.

№8. Остерегайтесь призрачных кнопок

Призрачные кнопки состоят из подписи и рамки одного цвета и прозрачного фона. Из-за этого с подписью могут возникать проблемы. Иногда лейбл можно поместить на белый фон (самое простое). Однако иногда другой сплошной цвет или яркое фото могут сделать текст кнопки неразборчивым.

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

Вывод: Вставляйте призрачные кнопки в систему на свой страх и риск. Проведенное мной исследование говорит, что призрачные кнопки хуже обычных. Кроме того, вы сэкономите время, не выслушивая споры дизайнеров на эту тему.

Другие типы кнопок

Со временем заказчик будет просить у вас кнопки других типов. Большие или маленькие. Кнопка с меню или просто панель с переключателями. Тут все зависит от вашей системы.

№9. Изменяйте размер кнопок

Интерактивные элементы можно разместить в довольно узких местах, к примеру, карточках или сайдбаре. В некоторых случаях наоборот может понадобиться огромная кнопка внутри большого фото на все окно.

Вывод: Предоставляйте заказчику возможность настраивать размер кнопок: делать их как больше, так и меньше. Чтобы пользователь мог изменить кнопку обычным переключением класса. Используйте запоминающиеся имена – Puffy, Micro – а не просто Large и Small.

№10. Отделяйте кнопки и ссылки

В эпоху плоского дизайна системы типа Material Design используют «плоские» кнопки в панелях, диалоговых окнах и вместе с текстом. По умолчанию такие кнопки не сильно отличаются от ссылок. Однако кнопку от ссылки отличает масса различных состояний и поведений.

Вывод: Если в вашей системе есть вариант плоских кнопок, проверьте, чтобы их стандартный внешний вид и поведение (как в коде так и дизайне) отличалось от ссылок. Сравнивайте кнопки и ссылки по всем возможным состояниям: фокус и нажатия, отступы и выравнивание.

№11. Добавьте в кнопки разнообразия

При нажатии на отдельные кнопки может всплывать окно с выбором разных стилей. Во многих системах реализован выбор стиля интерфейса, в частности элементов меню (или выпадающий список) и раздельных (сегментированных) кнопок.

Кнопка может как указывать на текущий выбор (к примеру текущий шрифт Arial), так и открывать набор независимых опций (к примеру поделиться или печать). Добавьте справа от кнопки иконку стрелки и вы получите двойную кнопку: правая часть будет вызывать выпадающий список, а левая часть будет выполнять действие.

Вывод: Разнообразьте ваше веб-приложение различными видами кнопок, возможностью добавить раскрывающееся меню в кнопку. Однако используйте эту функцию осторожно. Такие кнопки с разделением областей (левая часть кнопки выполняет основное действие, а правая вызывает выпадающее меню) подходят под множество сценариев, однако это усложняет код. В простых сайтах можно не добавлять менее популярные версии кнопок, это будет только отвлекать.

№12. Сделайте так, чтобы кнопки идеально работали друг с другом

Кнопки могут идти группами. В группе кнопок может быть одна первичная и как минимум одна вторичная кнопка. В переключателе есть положения включен и выключен, есть переключатели с большим количеством вариантов (к примеру, выравнивание текста по левому и правому краю, по центру и по ширине). В панели инструментов могут находиться все типы кнопок: первичные, вторичные, переключатели, меню и т.д.

Вывод: При создании новых типов кнопок проводите стресс-тесты в зажатом пространстве на работу этих кнопок с остальными, комбинируйте возможные варианты. Дизайнеры систем не гадалки, предсказывающие будущее. Однако исследование всевозможных сценариев поможет избежать непредвиденных ситуаций.

Используйте тег button только для кнопок

Вывод: Изучайте принципы объявления ссылок, чтобы понимать принципы объявления кнопок и их доступность.

Автор: Nathan Curtis

Источник: https://medium.com/

Редакция: Команда webformyself.

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Хотите научиться создавать шикарные дизайны сайтов?

Получите пошаговую обучающую систему по веб-дизайну

Получить

webformyself.com

Ваша кнопка для сайта в бесплатном онлайн генераторе As Button Generator: красиво, быстро и эффектно!

Создать кнопки для сайтов в онлайн сервисе As Button Generator, бесплатно, быстро, эффективно.

Приветствую вас, уважаемые читатели блога Vorabota.ru! Думаю, не ошибусь, если графический генератор кнопок As Button Generator (как сгенерировать кнопку) назову самым удобным бесплатным онлайн редактором, где можно создавать красивые кнопки для сайта. Надеюсь, со мной согласятся многие, когда увидят, как легко и быстро в этом генераторе можно создавать кнопки, меняющие свой вид прямо у вас на глазах.

Не хочу обижать разработчиков и создателей онлайн генераторов Da Button Factory и Сooltext, но, по моему мнению, они уступают редактору кнопок AsButtonGen по своим возможностям. Об этом свидетельствуют высокие оценки и популярность генератора AsButtonGen в зарубежном интернете (буржунете). К сожалению, в русскоязычном интернете об этом генераторе, где можно создать кнопки для сайта за считанные минуты и к тому же бесплатно, ничего нет. А если и есть, то упоминается о нем очень скромно, ссылка и все.

А ведь весь процесс создания кнопки в этом графическом онлайн редакторе происходит так быстро и эффектно, что у любого, даже неопытного пользователя в момент создания кнопок, может проявиться творческая «жилка» и азарт. Не ошибусь, если скажу, что создание сайта бесплатно – процесс довольно сложный, но очень увлекательный. И самостоятельное создание кнопки для сайта или блога в этом генераторе, может стать хорошей обучающей площадкой для многих начинающих Web мастеров. Хочу отметить, что специальных знаний, как сделать кнопку для сайта в онлайн редакторе AsButtonGen, не потребуется. И каждый, кто попробует создавать кнопки в этом онлайн генераторе, непременно сможет сделать свою кнопку самой красивой и привлекательной. И если добавить немного юмора, любой желающий сможет свою кнопку сделать самой «кнопистой» кнопкой в рунете. Конечно же, это не фотошоп, но и задачи у этого бесплатного онлайн сервиса совсем другие. Самое главное, сделать кнопки для сайтов или блогов в этом редакторе можно быстро и красиво. А творческие личности, освоив несложные инструменты генератора кнопок, смогут воплотить свои фантазии в реально красивые кнопки для сайтов и блогов.

Какие возможности при создании кнопки для сайта можно использовать в бесплатном онлайн сервисе генераторе кнопок As Button Generator.

В онлайн генераторе кнопок As Button Generator вы можете:

  • Создать кнопку в стиле Web 2.0 и экспортировать в виде отдельного файла формата PNG.
  • Задать размер кнопки до 600px по ширине и 200px по высоте. Если перевести в сантиметры, это примерно 21 х 7см., почти как изображение в начале этой заметки.
  • Возможность изменения цвета фона, на котором создается кнопка. По умолчанию установлен прозрачный фон.
  • Задавать кнопке границы различной толщины, делать скругления и менять цвет.
  • Выбирать тип градации.
  • Наносить на кнопку полосы.
  • Применять фильтры скашивание и тень, как на кнопке, так и на тексте.
  • Вставлять изображения на кнопку и удалять (в онлайн редакторах кнопок Da Button Factory, Сooltext и многих аналогичных такая возможность отсутствует).
  • Редактировать текст на кнопке.
  • Всплывающая палитра цвета с возможностью перемещения ее в окне браузера онлайн сервиса.
  • Создавать кнопки и редактировать их с помощью ползунков в простом интерфейсе генератора.

И так далее, и тому подобное. Но, как говориться, лучше один раз увидеть, как этот чудо-генератор «АсБуттонГен» делает кнопки для сайтов, чем читать про него дифирамбы.

Итак, для тех, кого интересуют подробности, как создать кнопку и ознакомиться с описанием всех инструментов генератора, левая кнопка для перехода. А для желающих приступить сразу к созданию кнопки в онлайн генераторе, кнопка справа.

 

Подробное описание меню инструментов графического онлайн генератора кнопок As Button Generator Создать кнопки для сайта в бесплатном онлайн сервисе графическом генераторе As Button Generator.

Надеюсь, читатели блога смогут оценить этот полезный онлайн сервис генерации кнопок по-достоинству. Желаю всем творческих успехов в процессе создания своей кнопки и до новых встреч на страницах блога Vorabota.ru

Вас это может заинтересовать:

Иконка для сайта или как сделать Favicon ico…

Фавикон – это небольшая картинка, которая появляется в Яндексе при выдаче результатов поиска. Она привлекает внимание к сайту и провоцирует пользователей переходить…

vorabota.ru

Как делается кнопка для сайта?

Зачем нужна кнопка для сайта? По мнению некоторых специалистов, она привлекает больше внимания, чем обыкновенный текст, что позволяет побудить людей к определенным действиям. Кроме того, существуют элементы такого вида и для размещения на внешних ресурсах, которые дают возможность «привести» дополнительный контент на определенный сайт. От баннеров эти элементы отличаются формами (присутствуют, например, круглые или фигурные образцы), размерами (могут быть как мелкие варианты, так и крупные) и краткостью надписей.

кнопка для сайтаКрасивые кнопки для сайта можно отрисовать самостоятельно, если вы обладаете определенными познаниями в сфере дизайна. Для этого нужно открыть графический редактор, создать шаблон требуемого размера, задать общий фон прозрачного цвета, чтобы элемент можно было размещать на любом фоне. После этого нужно выбрать форму. Она может быть квадратной, круглой, прямоугольной, овальной или фигурной. Кнопка для сайта может быть и объемной. Далее выполняется заливка или заполнение узором, градиент, оформление краев детали, тени от текста или самой кнопки. Затем с помощью стандартных шрифтов или в индивидуальном порядке отрисовывается надпись. Все вышеуказанные действия лучше проделать в векторном графическом редакторе.

Кнопки для форума обычно выполняются в едином колористическом стиле, отличаются заметностью и располагаются наверху или непосредственно в разделах. Сегодня предлагается множество готовых комплектов картинок, которые можно использовать как кнопки путем внесения ссылки на мини-изображения в код. Некоторые ресурсы для большей привлекательности периодические меняют стиль кнопок форума перед каким-либо праздником или событием. Картинок для этого также более чем достаточно.

красивые кнопки для сайтаЕсли вы не отличаетесь большими художественными способностями, то кнопка для сайта может быть создана с помощью программ-конструкторов, вроде DeKnop или Logo-Design в браузерном варианте CoolText. Последний предоставляет около 12 различных базовых вариантов, которые дают возможность «собрать» овальную, круглую или квадратную кнопку с любым базовым цветом или оттенком шрифта.

кнопки для форумаКонструирование кнопки начинается с выбора текста для надписи. Затем нужно выбрать шрифт, его цвет, наклон, жирность, толщину и цвет окантовки шрифта, наличие или отсутствие тени. Также нужно определиться с формой и градиентом заливки. Для этого может быть выбрана любая толщина контура, его цвет, а также размер и цвет тени от самой кнопки (может быть зеркальной с отражением внизу). К дополнительным опциям относится наличие эффектов при наведении мышки на элемент и определение с фактурой – кнопка может иметь гелевый, металлический вид, быть, как ломтик шоколада и др. Готовый вариант элемента можно получить в виде картинки или Html-кода.

Кнопка для сайта, отрисованная с помощью этой программы, имеет одну особенность: надписи на русском языке будут выполняться стандартными шрифтами, т. к. библиотеки витиеватых и оригинальных букв создана преимущественно для английского алфавита.

fb.ru

Принципы правильного создания кнопок для сайта

Принципы удачного проектирования кнопок

От автора: сегодня существуют тысячи способов проектирования и создания кнопок для сайта, и вам нужно потратить совсем немного времени на просмотр работ на dribbble, чтобы получить о них представление. По большей части они абсолютно одинаковы, но случайно встречаются отдельные примеры, в создание которых, это чувствуется, вложено немного больше заботы и внимания.

Пользуясь преимуществами чудесных свойств нового CSS3, можно создавать удивительно элегантные и стильные кнопки без единого признака изображений и получать идеально соответствующие стили для старых браузеров. Вам, может быть, нравится создавать кнопки для сайта, прямиком в CSS или вы стремитесь к своему предпочитаемому разметочному инструменту, но важно тщательно обдумывать соответствие дизайна своих кнопок и контекста.

Очень легко и просто взять заранее заданные «пользовательские интерфейсы PSD», которые бесплатно выложила какая-то щедрая душа (и, несомненно, содержащие кнопки, навеянные духом Apple’а). Но почему не потратить минуту на размышления, подходит ли упомянутый стиль кнопок к контексту вашего замысла, и решить, возможно ли создать что-то более оригинальное?Повторять чьи-то кнопки удобно, так экономится время, но невредно и потратить минуту на более детальное понимание замысла и структуры своих (или чужих) кнопок. Как создан их дизайн? Подходят ли они к интерфейсу/контексту/торговой марке? Есть ли возможность создать что-то уникальное? Достаточно ли выделяются мои кнопки? Нужны ли мне основные, второстепенные, третьестепенные кнопки? Достаточно ли они отличаются друг от друга? Симпатично ли смотрятся?! (Почему нет, все мы хотим создавать классные штучки, правильно?!).

Вот десять простых и тонких приемов, о которых я всегда помню, создавая кнопки. Я не стану размышлять о том, как применить эффекты слоев в Photoshop’е, а поделюсь несколькими простыми, базовыми принципами дизайна, которые могут принести большую пользу при оптимизации дизайна ваших кнопок и остального пользовательского интерфейса в общем.

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

1. Подгонка под бренд

Важно, чтобы ваши кнопки подходили к своему контекстуальному стилю. Это может означать сочетаемость по цветовой палитре, графическому стилю или взятый за образец некий вид ведущих линий бренда или логотип. Возможно, в них можно подсмотреть какие-то приметные формы, текстуры или дизайнерские стили. Может быть, у логотипа округлый внешний вид, и его можно примерить для своих кнопок, или еще какой-то потенциальный призыв к действию.

Если в интерфейсе преимущественно используются матовые цвета, то, возможно, большие блестящие кнопки вроде Apple’овских – не выход из положения. Если можете, воспользуйтесь удобным случаем и поэкспериментируйте с расширением бренда через интерфейс, использовав соответствующие формы, эффекты, цветовое оформление и прочие украшения.

2. Подгонка под контекстуальный стиль

В продолжение вышенаписанного, остановитесь на минуту перед тем, как открыть «элементы пользовательского интерфейса PSD». Можно легко взять градиенты, тени, фаски и т.д., но уделите минуту размышлению над тем, будет ли верно не просто сделать подбор к бренду, но и к интерфейсу, в котором находятся кнопки, и следует ли им вызывать ощущение чрезмерной «кнопкости».

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

3. Убедитесь, что кнопки достаточно контрастны

При таком большом количестве проектов, вдохновленных стилистикой Apple OS, особенно при множестве элементов PSD в них, кнопки могут теряться среди прочих элементов, применяемых в пользовательском интерфейсе, ослабляя свою потенциальную силу. Попробуйте с помощью цвета, размера, «белого» пространства или типографской разметки текста гарантировать своим кнопкам визуальный вес, необходимый для выделения их из остального интерфейса.

4. Рассмотрите закругленные или фигурные кнопки

Следуя вышеприведенным принципам, если в проекте имеется множество других элементов пользовательского интерфейса с закругленными углами, обдумайте применение кнопок с круглыми углами или, возможно, другие изменения формы. Так можно получить дополнительный контраст, гарантирующий, что важные призывы к действию выделены, как они того требуют.

5. Уберите выделение второстепенных элементов пользовательского интерфейса

Если вы стремитесь к стилю, навеянному OS, или работаете с заранее определенными PSD-элементами, скорее всего ваши элементы пользовательского интерфейса по форме окажутся преимущественно прямоугольниками с закругленными углами. Обдумайте уменьшение декорирования тех элементов, которые могут позволить себе выглядеть менее «кнопочно».

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

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

6. Согласующиеся по цвету края/границы

На большинстве виденных нами кнопок имелись какие-либо границы или края. В общем, если кнопка темнее фона, на котором находится, используйте границу темнее основного цвета кнопки. Если верно обратное, то примените границу более темного оттенка фонового цвета. Если вы склонны к первому варианту и применяете его на более темном фоне, как я обнаружил, края кнопки могут смотреться немного «грязноватыми». Применение последнего варианта также может помочь кнопке реально выделиться. Я считаю это основным принципом дизайна при работе с крами/границами в веб-дизайне.

7. Поаккуратнее с размытыми тенями

На протяжении многих лет я всегда обращался к «закону тени». «Закон тени» гласит, что падающие тени лучше всего работают, когда элемент светлее своего фона. Если элемент темнее фона, то тени следует применять очень осторожно. Как в случае с подходящими по цвету караями и границами, я искренне считаю это основный принципом дизайна, применимым ко всем элементам пользовательского интерфейса.

8. Немного иконографии внесет свой вклад в юзабилити

Будучи еще одной мелочью, способной в дальнейшем отличать ваши кнопки от похожих элементов пользовательского дизайна, применение простых иллюстрирующих иконок, таких как указатели-стрелки, может передать ощущение действия и небольшое интуитивное понимание происходящего при нажатии пользователем кнопки мыши.

Например, стрелка сразу после текста на кнопке, возможно, дает пользователю некое ощущение движения по странице или выхода со страницы. Стрелка, указывающая вниз, может предполагать, что некий контент ниже станет постепенно раскрыт, или, возможно, откроется какое-то меню.

9. Обдумайте главные, второстепенные и третьестепенные стили

Если создаете интерфейс с постоянно присутствующими на нем действиями и функциональностью, может оказаться важным создание в своих кнопках некоего визуального языка, определив главные, второстепенные, третьестепенные и еще какие-нибудь потенциальные стили.

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

10. Всегда делайте состояния обратной связи

На самом деле это не такая уж головоломка, но иногда вспоминается ближе к окончанию процесса дизайна. Всегда прорабатывайте ключевые состояния своих кнопок, чтобы гарантировать, что они дают пользователю в его контексте достаточную обратную связь. У пользователей, скорее всего, имеется мысленная модель того, как на самом деле работает кнопка, пока они применяют ее в различных состояниях. Несколько простых приемов CSS с тенями, границами и градиентами и так далее, могут обеспечить пользователю простую обратную связь и нечто приятное глазу!

Заключение статьи по созданию кнопок для сайта

У вас, дизайнеров, станет происходить все по-своему. Бьюсь об заклад, это будет длительное время, в течение которого вы станете часто отстраняться от экрана, слегка склоняя голову, щурясь и говоря: «Да-а-а, так почти хорошо!». Конечно, это – часть удовольствия, получаемого от процесса создания кнопок для сайтов и талантливые дизайнеры склоняются к тому, чтобы все делать именно так, но я думаю, что хорошо было бы произносить небольшой мысленный комментарий, диалог и размышлять над принимаемыми дизайнерскими решениями.

Нет ничего плохого в применении или изучении готовых стилей и элементов пользовательского интерфейса, они явно могут сэкономить множество времени. Может даже случиться так, что кто-то тщательно попиксельно смастерит именно то, что вы искали, и предложит это бесплатно. Однако я не считаю, что будет вредно более глубоко изучить дизайн и мастерство, выходящее за пределы создаваемого вами, и сообщить всему миру о том, что ваши дизайнерские решения развиваются и движутся вперед.

Автор: Pete Orme

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Курс по программированию на языке PHP

Изучите PHP с нуля до результата!

Смотреть курс

webformyself.com

Создание кнопок для сайта

css создание кнопкиДобрый день. Вчера я рассказывал про онлайн сервис для создания кнопок. Там произошло небольшое недоразумение, и я обещал, что сегодня подробно опишу создание кнопок для сайта, без всяких сервисов на чистом CSS.

CSS создание кнопки актуально еще и потому, что несколько строчек кода весят куда меньше, чем картинка. Даже использование спрайтов лучше исключить в тех местах, где можно задать стиль элементу только при помощи CSS.

Вообще, почему я так много уделяю внимания быстрой загрузки сайта? Да потому, что при прочих равных условиях, в выдаче будет первым тот, который быстрее грузится. Но для лендинг пейдж – это не очень важно, ведь СЕО продвижение посадочных страниц в топ 10 – очень дорогое удовольствие. А кроме того, сложное и затратное по времени.

Поэтому, на лендинг пейдж, трафик, в основном, идет не с поисковой выдачи, а с разных рекламных площадок. (Яндекс Директ, GoogleAdwords, Баннеры и т.д.)

В скором времени, я обязательно расскажу вам о том, как при помощи разных площадок для рекламы привлечь трафик на свою посадочную страницу.

Но если тема вашего сайта предполагает посещение людей с мобильных устройств, то скорость загрузки приземляющей страницы может стать проблемой для комфортной работы с ней. Ведь никому не нравиться долго ждать, пока страница загрузится. Что-то я отвлекся от темы. Приступим…

Создание кнопок для сайта – html разметка.

Будем делать такую кнопку c эффектом нажатия, при наведении.

создание кнопок для сайта

На этом этапе, нам необходимо написать html разметку кнопки. Для этого существует специальный парный тег «button».

<button> </button>

Парный тег – означает, что обязательно должен присутствовать закрывающийся тег.

Если вы используете кнопку в форме обратной связи, то необходимо задать тип “submit”:

Это связано с тем, что раньше разные браузеры обрабатывали элемент button по-разному. Internet Explorer передавал текст между тегами “button”, а Mazilla – передавала то, что было прописано в атрибуте “Value”. Сейчас ситуация изменилась. Но все же я рекомендую писать так:

<button type=»submit»> </button>

Для того, чтобы кнопка понимала к какой форме она привязана, необходим элемент “form” и в нем должен быть задан идентификатор формы:

<form id=»zayavka»><button id=»firstButton» type=»submit»> ПОЛУЧИТЬ ПРАЙС </button></form>

Давайте теперь присвоим идентификатор кнопке для того, чтобы ей можно было задать уникальный стиль, в случае если на странице кнопок несколько, и они все разные:

<button id=»firstButton» type=»submit» form=»zayavka»> ПОЛУЧИТЬ ПРАЙС </button>

Теперь добавим стили нашей кнопки.

Создание кнопок для сайта – CSS разметка

Сначала создадим общий вид, а потом добавим пару строк кода, для эффекта при наведении и сымитируем эффект нажатия.

Поехали…

#firstButton {display: block; /* Переводим в блочный элемент*/margin:0 auto; /* Выравниваем по центру */width: 300px; /* Задаем ширину */height: 40px; /* Задаем высоту */border: none; /* Убираем обводку */background: #188B12; /* Задаем цвет кнопки */color:#fff; /* Задаем цвет текста */font:bold 15px 'Arial', sans-serif; /* Жирность, Размер, Шрифт */cursor: pointer; /*Курсор меняется на пальчик, при наведении*/box-shadow: 0 4px 0 #11620D; /*Задаем тень — х, у, размытие, цвет*/border-radius: 3px; /*Скругление углов*/}

Думаю, подробнее вряд ли получиться, но если нужна будет помощь, обязательно пишите в комментариях – помогу.

Теперь добавим стили для кнопки, которые будут применяться при наведении на нее курсора. Создадим эффект нажатия.

#firstButton:hover{margin-top: 2px; /*опустим кнопку на 2 пикселя*/box-shadow: 0 2px 0 #11620D; /*Делаем меньше тень на 2 пикселя*/}

Можно сделать так, чтобы кнопка плавно меняла цвет:

#firstButton:hover{transition: .5s; /* Скорость изменения цвета */background: #F96400; /* Задаем цвет кнопки */box-shadow: 0 4px 0 #BB4A00; /*Задаем тень — х, у, размытие, цвет*/}

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

А на сегодня — все. Теперь, создание кнопок для сайта у вас не должно вызывать никаких проблем. До встречи на smartlanding

smartlanding.biz

Как сделать кнопку для сайта?

Как сделать кнопку для сайта?

Кнопка на сайте – атрибут необязательный; без него вполне можно обойтись, делая простые текстовые ссылки или обычные меню в виде списка. Но изящная кнопка украсит страницу, выделит меню, заставит обратить внимание на, например, предложение внести страницу в закладки. Главное, чтобы её дизайн не противоречил общему стилю и содержанию ресурса.

Как сделать кнопку при помощи html

Кнопки не обязательно рисовать. Их вполне можно сделать программными средствами с помощью скриптов или таблицы стилей и html. Правда, это будут простые прямоугольные кнопки, но для сайтов с серьёзным содержанием и строгим дизайном, например, юридических, это будет то, что нужно.

Как сделать кнопки скриптами, мы рассмотрим как-нибудь в следующий раз. Сейчас остановимся на простейшем варианте – html. Предположим, нужно оформить кнопками меню сайта: «Главная», «О компании», «Контакты» и т.п. Нужны кнопки с соответствующим текстом и ссылками, ведущими на указанные страницы.

Простая ссылка пишется так: <a href=”адрес страницы”>Текст ссылки</a>. Выглядеть эта конструкция будет так:

elhow.ru