Как сделать интерактивную кнопку
Кнопки | CSS
Простая HTML кнопка для сайта
Есть несколько типов input для создания кнопки и тег button [ type=»button | reset | submit» ]. Внешне и функционально они абсолютно одинаковы.
Как сделать кнопку на CSS
Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.
Создание кнопки: «А нужно ли изменять вид кнопки при наведении или делать кнопку с эффектом нажатия?»
Надо признать, что сложнее всего придумать как будет вести себя кнопка во время нажатия.
Код кнопки для сайта
Иногда самый простой внешний вид может выглядеть более стильно, чем навороченная с крутыми эффектами кнопка. Взгляните, как она тут [cssdeck.com] смотрится.
Кнопка с градиентом
Градиенты плохо поддаются анимации, плавной смене цвета фона. Что же делать? Ответ: box-shadow [перейдите по ссылке, там есть суперская форма входа].
А вот всякие перемещения работают на ура.
Довольно популярно разделение кнопки на два цвета
Красивые кнопки CSS
Кнопки «Скачать» CSS
Стилизация кнопок с помощью CSS
Анимированная кнопка: «свечение текста»
Стиль кнопок с бликами
Кнопки меню
Объёмная кнопка CSS
Вдавленная кнопка
Выпуклая кнопка HTML
Круглые CSS кнопки
Анимированная кнопка CSS
Анимированное заполнение происходит так (тут нет лишнего кода, связанного с кнопкой). Другие интересные эффекты загрузки можно найти тут [tympanus.net].
3d кнопка CSS
Оформление кнопок
Кнопки сайта следует выполнять в едином стиле, чтобы не оставалось сомнений, что если здесь нажать, то произойдёт какое-то действо.
Именно поэтому у Google второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.
Также нужно победить желание сделать кнопку величиной со слона, чтобы не стать объектом баннерной слепоты.
98 комментариев:
damir-tote Спасиб NMitra, что подобное искал =) А не можешь еще показать, как сделать вертикальное выпадающее меню, только не вбок, а вниз)) NMitra См. http://shpargalkablog.ru/2011/07/accordion-css.html
В качестве содержания добавляйте список ol из ссылок. Дмитрий Вып. список это просто) Даже просто введя в гугл вып список на цсс можно найти NMitra Посмотрите последний пример http://shpargalkablog.ru/2012/04/display-block-inline-css.html с наведением на пункт меню или с постановкой галочки справа. Есть вариант с :focus, но в Хроме нужно подключать картинку, я не стала поэтому расписывать.
Для высоты сложнее. Можно указать одинаковую height и line-height, но line-height не поддерживается некоторыми мобильными браузерами, например, Opera Mini. Совсем убрать padding.
если для одной страницы, то должна быть кнопка для перехода в «HTML»-режим при написании/редактировании статьи. В нужное место добавляете и стили, и кнопку. Только в этом случае стили нужно вписывать обязательно внутри
Ирина, благодарю за комментарий! Анонимный Понимаете, я в этих кодах не разбираюсь, но. кнопки очень понравились. сайтами не занимаюсь, но красиво подать ссылку на файл попробовал. тупо вставил код кнопки добавил адрес на файл и вроде работает! Пример: http://bogoglasnik.ru/load/88-1-0-1380?l_ZeHf (начинающий) Анонимный Добрый день. Подскажите пожалуйста, как сделать кнопку что бы она была ссылкой, вела на другую страницу? Где вписать ссылку
А так вроде со всем разобрался и с цветом и размером, а вот как сделать ее ссылкой что бы при нажатии переходить на другую страницу
Заранее благодарен. NMitra Заполните атрибут href (подробнее http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html )
background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));
Вот сейчас опять перечитываю в поисках как убрать подчёркивание.
Очень не хватает просто подробного описания, какой параметр что значит.
Всякие комбинации служебных слов перепробовал, но понять так и не смог.
Может что подскажете. Заранее огромное Спасибо!
a.button_main_ico <
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#3895EA;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main_ico:hover <
background-color: #BABABA;
>
a.button_main_ico:focus <
background-color: #D8D8D8;
>
a.button_main_ico:focus:hover <
background-color: #DFDFDF;
>
a.button_main_ico:before <
content: url(../ico_L_ready.png);
> NMitra Вы иконку добавляете с помощью :before? Тогда текст нужно окружить span. :before и span задать vertical-align: middle;
a.button_main_ico:before,
a.button_main_ico span <
content: url(../ico_L_ready.png);
vertical-align: middle;
>
Спасибо за участие и заданное направление.
За отклик и направление Огромное Спасибо. NMitra Высота-то указана фиксированной height:24px; Анонимный Однако, нашёл ответ который мне подошёл.
в HTML
Кнопка с иконкой и текстом выравненные по середине кнопки:
Кнопка
Тоже но без иконки:
Кнопка
В CSS
a.button_main <
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#550000;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main:hover <
background-color: #BA0000;
>
a.button_main:focus <
background-color: #D80000;
>
a.button_main:focus:hover,a.button_history:focus:hover <
background-color: #DF000;
>
Тут приятно, что класс кнопки, отвязан от класса иконки. Значит используем один класс на все кнопки приложения и лишь меняем классы иконок по надобности.
Спасибо вы натолкнули на верный путь, с уважением sharpionok Анонимный Вместо HTML кода напечаталась ссылка чёрти куда. Как показать код в HTML не понимаю.=(
Дизайн-библиотека в Figma: кнопки и формы для ввода информации
Продолжаем создавать собственную дизайн-систему в Figma. Сегодня будет много букв и картинок. Мы поговорим о том, как я делаю компоненты для кнопок, инпутов, чекбоксов, радиобоксов, выпадающих списков и прочих элементов, которые часто встречаются в дизайне сайтов и интерфейсов.
В прошлой статье мы создавали стили для текста, заливок, стили теней, а также компонент для плашек.
В своем Telegram-канале я регулярно делюсь полезными ссылками, своими статьями, мыслями о своей работе.
Кнопки могут иметь несколько состояний:
Сегодня мы рассмотрим, как отрисовать все эти состояния и легко переключаться между ними.
Кнопки в Figma можно создать двумя способами: с использованием Auto Layout (масштабируются вместе с текстом внутри) и кнопки с текстом, расположенным по центру вне зависимости от того, до какого размера масштабирована сама кнопка. В разных ситуациях удобны разные варианты кнопок.
Создаем прямоугольник нужного размера, задаем скругление углов и прочие эффекты, если нужно. Подбираем цвет из палитры, которую мы создавали в предыдущей статье. У меня это будет синяя кнопка. Если забыли создать нужны стиль — создаём, добавляем в нашу систему.
С помощью Text Tool (T) пишем название кнопки. Задаем стиль текста, зарезервированный в нашей дизайн-библиотеке специально для кнопок (смотри предыдущую статью).
Жмем на иконку с тремя точками в панели справой. Делаем настройки, как на картинке. Теперь границы рамки текста будут изменяться в размере вместе с самим текстом по мере набора фразы.
Далее выравниваем слой с текстом относительно прямоугольника по центру. Для этого, выделив оба слоя, последовательно жмем две иконки вверху в правой панели:
Затем выделаем оба слоя и запаковываем в компонент, задаем компоненту имя.
Сразу поговорим об именовании компонентов: чтобы слева на вкладке Assets наши компоненты расположились в одной группе, их следует именовать через слеш. Например я хочу, чтобы все кнопки у меня попали в папку Button. Для этого я использую в именах префикс button /. Например button /blue и так далее. Таким же образом можно создавать подпапки. Заранее продумайте, как вы хотите объединить создаваемые вами компоненты и придумайте названия для папок.
Это удобно также и при замене компонентов в instance. Они там также объединяются в группы.
Итак, мы задали имя новому компоненту кнопки. Далее, не снимая выделения с компонента в панели справа ищем вкладку Auto Layout и жмем плюс. Теперь, если мы захотим отредактировать текст кнопки, ее размер будет изменяться вместе с этим текстом.
Изменяя два правых параметра на вкладке Auto Layout, добиваемся подходящего размера отступов по вертикали и горизонтали от границ текста до края кнопки.
Доработка функционала кнопки
Мы можем расширить функционал компонентакнопки, к примеру, добавить в кнопку иконку, которую можно будет скрывать или показывать в слуае необходимости.
Рисуем необходимые иконки, задаем им цвет из палитры. Запаковываем в компоненты. Задаем имена так, чтобы они группировались.
Внимание: размеры компонентов должны быть одинаковыми. У меня получилось поле 20×20 пикселей. Иконка внутри компонента может не занимать все это поле, но сами компоненты иконок должны быть идентичны по размеру.
Копируем одну из иконок и помещаем ее экземпляр внутрь компонента с кнопкой, у меня иконка встанет перед текстом.
Остальные иконки пока оставляем в покое. Позже я покажу, как можно легко манипулировать кнопками.
Скрываем на палитре слоев новую иконку, чтобы базовое изображение кнопки было простым, при в процессе работы с экземплярами кнопки, мы сможем отобразить иконку, если она понадобится в дизайне.
Базовый компонент готов.
Создаем экземпляр компонента кнопки (Contrl+d или Comand+d самого компонента или перетащить новую кнопку из панели Assets).
Выделим новый экземпляр и зададим параметры оформления для этого состояния кнопки: настраиваем цвет, обводку, можем добавить тень, другие эффекты (не забываем при этом предварительно задать стиль для используемых эффектов). Можно применить настройки и к тексту (цвет, шрифт, начертание и т.п.).
Я изменила стиль заливки кнопки, у меня кнопка будет чуть чуть темнеть при наведении.
Теперь выделяем экземпляр кнопки и снова запаковываем ее в компонент, даем имя с использованием /. Новый компонент теперь наследует компонент базовой кнопки. Если мы что-то поменяем в базовой кнопке (кроме цвета, который мы переопределили), это сразу отразится на состоянии других кнопок, созданных на основе базового компонента кнопки.
Активность по табу и неактивная кнопка
Это состояние делается аналогичным образом. Создается экземпляр компонента базовой кнопки и изменяются нужные параметры: заливка, стиль, эффекты.
У меня активные по табу кнопки будут иметь синюю тень. Для этого я дополнительно создала стиль для тени. Как это сделать, читайте в предыдущей статье.
Для неактивной кнопки (которую нельзя нажать и она в интерфейсе например будет активирована позже) я сделала полупрозрачный фон, чтобы кнопка интересно смотрелась не только на белом, но и на на неоднородном цветном фоне. Для этого был создан новый стиль заливки с прозрачностью в 15%. У теста внутри кнопки была понижена непрозрачность до 50%.
Иногда необходимо четко вписать кнопку в сетку проекта, либо сделать кнопку огромной на всю ширину контента.
Начинаем так же, как в пред. варианте: создаем прямоугольник, текст, центрируем их и создаем компонент. Но в этот раз вместо Auto Layout мы будем задавать Constraints: Center, Center:
Если в кнопках нужны иконки, то нужно сгруппировать текст и иконку и применить Auto Layout только на саму эту группу. А далее уже центрировать с помощью Constraints всю группу внутри кнопки.
Constraints для фонового прямоугольника: Left+Right, Top+Bottom.
Состояния масштабируемой кнопки: создаем экземпляр компонента масштабируемой кнопки, настраиваем внешний вид. Запаковываем все в еще один компонент с настройками Constraints: Left+Right, Top+Bottom.
Auto Layout в данном случае не используется.
Кнопки могут состоять не только из прямоугольника и текста. Очень интересно смотрятся разного рода кнопки, построенные шейпах с различными настройками Constraints или Auto Layout:
Используя описанные принципы, мы можем создать компоненты кнопок другого цвета, кнопки с обводкой и т.д. Главное правило: компоненты должны наследоваться от компонента базовой кнопки. Этот компонент будет влиять на остальные и задавать им базовые свойства.
Таким образом можно легко управлять всеми кнопками сразу через базовый компонент:
Итак, мы создали много разных компонентов кнопок, унаследованных от одного базового компонента. Посмотрите, как легко менять варианты кнопок через instance, отображать или скрывать дополнительную иконк, менять сами иконки:
Мы еще не раз применим в нашей библиотеке принцип наследования. Благодаря этому, изменения всей системы будут занимать минимум времени и наша дизайн-система будет очень гибкой и легко перестраиваемой под различные проекты в совершенно разных стилях.
Вспомогательный компонент form_stroke/simple
Далее мы рассмотрим различные формы ввода информации. Для их создания нам понадобится небольшой вспомогательный компонент form_stroke/simple.
Обратите внимание на именование компонента — я заранее его задаю с использованием /, чтобы позднее добавить в группу компонентов form_stroke другие вспомогательные компоненты
Компонент form_stroke/simple будет содержать в себе стиль оформления самого прямоугольника формы ввода. Я сделала обычный прямоугольник со сругленными углами, с заданными параметрами заливки и обводки. Constraints прямоугольника: left+right и top+bottom.
В своих дизайнах мы можем не ограничиваться только прямоугольником. Например Это может быть и просто линия снизу компонента, которая позволит получить стильное поле ввода с подчеркиванием полей вместо прямоугольников.
Не забываем использовать наши готовые стили заливок, эффектов, при необходимости добавлять в библиотеку новые стили, если они потребуются.
Активность по табу и ошибочное состояние базового компонентаИтак, компонент готов. Я вынесла его отдельно, чтобы у нас была единая точка редактирования стиля для всех форм и чекбоксов — это довольно удобно.
Активность по табу и ошибочное состояние базового компонента
Также нам потребуютсся два унаследованных компонента от form_stroke/simple для активных состояний по табу и состояний ошибки ввода. Для этого делаются 2 новых экземпляра form_stroke/simple, настраивается их вид и эти экземпляры запаковываются в компонента. Имена компонентам я задала по тем же правилам, что и базовый компонент, чтобы Оби объединились в группу
Создаем само поле ввода (инпут)
Для создания поля ввода нам может понадобиться:
Эти элементы могут располагаться по-разному в зависимости от желаемого стиля. Название формы например может стоять над основным полем, а может располагаться внутри него. Название также может скрываться или нет при попытке ввести текст. Текст ошибки также может располагаться в разных местах — сверху, справа и т.д.
Создадим новый компонен на основе базового form_stroke/simple и поместим внутрь компонента также перечисленные выше текстовые слои:
Не забываем для вложенного компонента и текстов настраивать constraints. Например вводимый текст в форме и компонент form_stroke/simple имеют настройки left+right и top+bottom. Название и ошибка форм в нарисованном мною варианте привязаны к верхнему краю.
А вот так легко можно менять состояние ошибки и активность поля ввода:
Создаем дополнительные компоненты для форм ввода в этих двух состояниях
В моем варианте был использован Auto Layout на названии формы и тексте ошибки, чтобы текст ошибки мог сдвигаться, правее от названия.
Выбрала такие имена компонентов:
Компонент выпадающего списка будет создаваться на основе компонента поля ввода. Для этого мы разместим друг над другом этот компонент и иконку треугольника или головку, которая будет открывать саму выпадушку.
В нашей библиотеке уже есть белая галочка. Сделаем еще один компонент с галочкой нужного нам цвета, используя компонент белой галочки. Для этого в экземпляре этого компонента перекрасим иконку в нужный цвет и снова запакуем в компонент (можно и не делать отдельный компонент, а перекрасить уже внутри формы, это уже вопрос кому как удобнее).
Чуть позже нам понадобится перевернутая иконка галочки для открытого списка. Так что сразу создадим и компонент для нее, отразив базовый компонент по-вертикали.
Обратите внимание на имена иконок. они находятся в группе icon, подгруппе arr.
Создаем экземпляр компонента form/simple_form, размещаем в нем первую иконку, запаковываем в компонент form/dropdownlist.
Constraints для иконки: right и center.
Constraints для form/simple_form: left+right и top+bottom.
Как сделать кнопку для сайта, которая продаёт
Тезисы, которые обсудим:
Цифровые продукты конкурируют за ограниченное внимание пользователей. Современная экономика все больше вращается вокруг концентрации внимания человека и даже малейшие элементы могут иметь значение. Вот почему кнопки призыва к действию играют фундаментальную роль в любом интерфейсе.
CTA – это действие, которое вы хотите, чтобы посетители вашего сайта сделали.
Зачастую кнопки теряются на фоне страницы, их не видно, на них не расставлены акценты и пользователю уже сложнее выполнить свое действие. Чем больше кнопка похожа на то, что мы ассоциируем с кнопками – тем лучше. Вот почему прямоугольник всегда самый надежный вариант для кнопки. Другие фигуры и формы (треугольник, круг, органика) не так узнаваемы для пользователя. Действуйте с осторожностью и используйте их только тогда, когда общий стиль вашего продукта требует отклонения от норм.
Кнопка должна выглядеть как кнопка
При проектировании кнопок помните о каждом из этих элементов и подходите к ним с умом. Опираясь на руководство по стилю бренда, подумайте, какие кнопки будут соответствовать бренду и хорошо впишутся в интерфейс, а также, какие кнопки привлекут внимание пользователей.
Давайте разберем основные факторы, которые влияют на восприятие кнопок:
Один из важных аспектов создания кнопки призыва действия – это тон сообщения. Глаголы действия представляют простой, ориентированный на действие подход, побуждающий пользователя предпринять конкретное действие, потому что они отвечают на основной вопрос: «Почему я должен нажать эту кнопку?».
Наиболее успешные компании используют такие фразы, как «Попробуйте бесплатно», «Узнайте больше», «Получите ранний доступ», «Начните работу» и многие другие, а также увеличивают количество конверсий, добавив ценность тексту призыва к действию.
Неравномерно расположенные кнопки являются одной из самых распространенных проблем всех интерфейсов. Вы должны установить отступы и безопасное пространство, используя базовые значения вашей сетки. В приведенном выше примере внутренний отступ слева в два раза больше, чем вертикальный. Это хороший выбор для повышения читабельности.
Цвет – это фактор номер один, влияющий на эффект изоляции, когда дело доходит до кнопок. Всегда старайтесь сделать кнопку основного действия более заметной. Используйте контрастный цвет, чтобы привлечь внимание пользователя.
Во-первых, вы должны убедиться, что ваши цвета, изображения и типографика работают вместе для кнопки, как элемента. Читабельность, разборчивость и контрастность очень важны, и вы должны заранее их проверить.
Расположение элементов в дизайне играет большую роль в том, как пользователь будет считывать контент страницы. Расположив текст и кнопки в соответствии с естественным потоком чтения, вы сможете легко направить посетителей на свой призыв к действию.
Размер и положение играют основополагающую роль в заметности и доступности призыва к действию. Значительное количество переменных определяет правильный размер кнопки.
Исследование размера кнопок и расстояния между ними выявило стандарт, подходящий для большинства пользователей, включая пожилых людей.
Большие кнопки захватывают большую часть внимания пользователя. Это имеет решающее значение для поглощения контента страницы. Слишком маленькая кнопка может серьезно повлиять на ее доступность.
Элементы призыва к действию оказывают огромное влияние на конверсии компании и заслуженно считаются наиболее важным элементом интерфейса. Принимая во внимание ряд основных принципов дизайна, вы можете выделить кнопку призыва к действию и привлечь к ней необходимое внимание.
Поэтому, перед созданием интерфейса, обратите внимание на правила, которые помогут правильно выделить кнопку и не снизить конверсию сайта.
Буду очень благодарен за лайк на этой статье!