В настоящее время я работаю над одним веб-приложением, и вот захотелось мне обновить нынешний, довольно-таки топорный интерфейс на что-то более современное, более красивое. Начать решил с кнопок как с наиболее технически нагруженной части: в них требуется не только заменить внешний вид, но и добавить индикацию нажатия и обработку событий. Сразу же возникла проблема: как обеспечить масштабирование? Обычной растровой картинкой не обойтись, так как у пользователей могут использоваться разные шрифты (как вид, так и размер), и картинка-подложка не будет под них адаптирована. Логично было бы попробовать использовать для этих целей SVG, чем я и занялся.
К сожалению, в конечном итоге я пришёл к выводу, что овчинка не стоит выделки: слишком много проблем вылезло при попытке реализации этой идеи. Тем не менее, я не считаю это время потерянным: я приобрёл новые знания и навыки и теперь хотел бы поделиться ими с сообществом, чтобы облегчить жизнь тем, кто решит повторить мой путь. Описать свои мучения я планирую в двух статьях: в первой — работа над собственно SVG-картинкой, во второй — техника внедрения полученной картинки в качестве кнопок, возникающие при этом проблемы и их решение или обходные пути. Кому интересна первая часть, прошу под кат.
Дизайн кнопок для сайта в фотошопе
Для начала хочу предупредить, что область SVG для меня совершенно новая, и полностью изучить все мыслимые функции и всякие хитрые трюки я не имел возможности. Соответственно, если в тексте встречается фраза вида «это сделать невозможно», считайте её просто сокращённой формой от «я не нашёл способа сделать это ни в стандарте, ни в учебниках, ни в гугле». 🙂 Естественно, всяческим поправкам и уточнениям буду очень благодарен.
Ну а теперь приступим к ТЗ: хочется иметь красивую масштабируемую картинку, которую можно было бы использовать в качестве кнопки на веб-страницах. В качестве основы для экспериментального дизайна я выбрал приглянувшуюся мне кнопочку с сайта One day files:
Немного поразбиравшись с картинкой, я составил её векторное описание: по границе — серый прямоугольник с закруглёнными краями, внутри — вертикальный градиент, состоящий из двух линейных областей (50%/50%). Получилась элементарнейшая задача для первого класса занятия по изучению SVG; решение может выглядеть следующим образом:
(Здесь и далее я для экономии места буду опускать XML-заголовок и определение тега .)
Однако здесь не всё так просто. Вот как выглядит то, что получилось:
Остроглазые товарищи наверняка уже увидели, что здесь что-то не так. Для остальных я заменю цвет границы на красный и увеличу изображение, чтоб было лучше видно:
Уроки Python / Модуль tkinter создание кнопки и вызов функции
Во-первых, граница получилась какая-то невнятная, размытая и более тёмная, чем предполагалось. Во-вторых, уголковые части границы получились явно толще, чем боковушки. В-третьих, переходы к закруглению не плавные, а угловатые.
Вся беда в том, что векторные координаты находятся не в центрах пикселей, а «в промежутках» между ними. Естественно, при отрисовке такая линия «размывается» между двумя соседними положениями вдоль всей своей длины, причём одна из «половинок» линии оказывается за пределами рисунка и не отображается.
Если бы у нас был обычный прямоугольник, можно было бы объявить это фичей, подправив цвет на более яркий (для компенсации размытия) или вообще установив толщину границы в два пикселя. Однако в нашем случае проблему это не решит, закруглённые уголки всё портят: они-то находятся целиком в области видимости, поэтому и переход останется угловатым, и толщина линии в закруглениях останется «полноценной», в отличие от боковых границ.
Как быть? Можно попытаться сдвинуть координаты на половину пикселя, это решит проблему «междупиксельности». Но ширину и высоту мы в этом случае корректно задать уже не сможем: невозможно указать значение «сто процентов минус один пиксель». Задавать какие-нибудь 95% бессмысленно: для маленьких кнопок разница в 5% будет слишком мала, для больших — слишком велика.
Если же указывать все размеры только в пикселях, то мы не сможем обеспечить необходимый режим масштабирования: толщина границы тут же окажется привязанной к размерам изображения и будет меняться пропорционально. В результате, если мы растянем картинку по горизонтали, оставив высоту неизменной (типичный вариант использования кнопок на веб-странице), то боковые границы станут толще, чем верхняя и нижняя, что выглядит очень некрасиво.
Основная проблема здесь в том, что мы пытаемся совместить процентные и пиксельные координаты, масштабируемую часть с фиксированной частью изображения, что в SVG как бы не принято. Более того, как выяснилось, процентные координаты можно указывать только для фигур. Тег их не поддерживает в принципе (несмотря на заверения учебников, что все фигуры — это всего лишь частные случаи ). Что ж, попытаемся обойтись обычными фигурами, и в этом нам поможет атрибут transform. Трюк заключается в том, что мы установим начальную координату в 100%, ширину и высоту укажем фиксированную — в пикселях, а полученную фигуру (находящуюся за пределами рисунка) вдвинем обратно в изображение, сместив его на нужное число пикселей. Например, чтобы нарисовать прямоугольник размерами 5×10 в нижнем левом углу, можно использовать следующий код:
К сожалению, даже этот трюк не поможет нарисовать сразу всю границу одним тегом , но мы можем, комбинируя простые фигуры, нарисовать маску для той области, где должна проходить граница, а потом выполнить заливку. Конкретный способ рисования маски, разумеется, может варьироваться, но я сделал так: двумя прямоугольными рамками, сдвинутыми на полпикселя, обрисовал общий прямоугольник границы. Далее вырезал угловые участки, посадил на их место кружочки и, наконец, отрезал лишние части этих кружочков, оставив лишь по одной четверти для закругления углов. Вот итоговый код:
Конечно, в качестве вырезания нужных четвертей из кругов было бы логичнее воспользоваться маской или обрезкой через , но оказалось, что при таком вложенном использовании Оперу версий ниже 11 начинает здорово колбасить: начальная отрисовка выполняется корректно, но если поверх неё протащить другое окно, обновление изображения выполняется некорректно. Проще оказалось отказаться от вложенных масок и замостить обычными прямоугольничками, чем бодаться с этим глюком.
Собственно, кнопка уже практически готова. Осталось лишь навесить текст, но и здесь полезли неприятности. Первая, она же главная: каким должен быть размер шрифта? Простого решения этого вопроса не нашлось, а поскольку он имеет самое прямое отношение к интеграции SVG-изображения с HTML-страницей, я отложу эту рассмотрение этой проблемы до следующей статьи, а пока для иллюстративного примера оставлю размер шрифта умолчальным. Также хотелось получить отцентрированный текст, но даже такая простая задача оказалась не под силу некоторым браузерам (не будем указывать пальцем, хотя это Firefox), которые не умеют подстраивать базу шрифта, поэтому придётся пока обойтись центрированием лишь по горизонтали.
В итоговой картинке я также добавил при помощи скриптинга подсветку при наведении мыши и нажатии на кнопку, а также перевёл часть описаний в стили. С этим никаких трудностей не возникло, всё сразу заработало, как надо, поэтому загромождать текст описанием данных вещей я не стану: они есть в любом учебнике. Код получившейся кнопки можно посмотреть здесь.
Для тех, кто хочет посмотреть, как это выглядит в натуре, может попробовать на живом примере (разумеется, требуется браузер с поддержкой SVG).
Благодарю за внимание, готов ловить помидоры. 🙂
Источник: habr.com
Как сделать кнопку в html css? Красивые кнопки для сайта с примерами
Приветствую! В этой статье хочу поговорить про кнопки, на мой взгляд один из важнейших элементов в дизайне сайтов и приложений. Ведь, в большинстве случаев, кнопки нужны для того, чтобы заставить пользователя выполнить какое-либо действие (подписаться на рассылку, добавить товар в корзину, оставить комментарий, заказать обратный звонок и т.д.), которое можно так или иначе монетизировать. Мы же здесь не просто так собрались 😉
Итак из этой статьи вы узнаете:
- Для чего нужны кнопки и какие функции они выполняют
- Какие бывают кнопки и в чем их различия
- Как сделать кнопку в HTML
- Как сделать красивую кнопку в HTML и CSS
Также в конце статьи вас ждет небольшой бонус, который пригодится каждому сайтостроителю.
Но давайте по порядку.
Для чего нужны кнопки на сайте?
Ответ напрашивается сам собой: “Для того, чтобы их нажимали!”. И, действительно, выделяющаяся симпатичная кнопка привлекает гораздо больше внимания чем тусклая и унылая ссылка. С другой стороны, если вся страница заполнена разномастными кнопками, которые, переливаясь и моргая, требуют внимания пользователя, он, скорее всего, не поняв, что от него требуется, не нажмет ни на одну и просто закроет вкладку.
Поэтому использовать кнопки надо “экономно”, в идеале не больше 1-2 в видимой области экрана. При этом пользователю должно быть максимально понятно, что произойдет, если он нажмет на кнопку.
Какие бывают кнопки?
В моем представлении кнопки бываю двух типов, для каждого из них я использую соответствующие HTML-теги:
Кнопки-ссылки нужны для привлечения внимания к ссылке. Побуждают пользователя перейти на какую-либо страницу, например, страницу регистрации. Для них я использую тег .
Кнопки-действия нужны для совершения какого-либо действия на странице (отправка формы, открытие модального окна и т.д.). Для этого можно использовать теги или . Я предпочитаю второй вариант, т.к. он гораздо более гибкий в настройке.
В то же время атрибут href является невалидным для тега , поэтому его не стоит использовать в качестве кнопки-ссылки. Опять же, можно сделать кнопку ссылкой, придумав какие-нибудь “костыли” типа
Но зачем это нужно. Все гораздо проще и понятнее.
Если кнопка нужна для перехода на страницу — используем , во всех остальных случаях —
Как сделать кнопку в HTML?
Тег используется для создания кнопок, при нажатии на которые должны происходить какие-либо действия, например отправка формы, очистка формы, открытие модального окна, загрузка изображения и т.д.
Выполнить действие
Основными атрибутами таких кнопок являются:
type: button | submit | reset
Тип кнопки. Это необязательный параметр, и его можно пропустить. Если кнопка находится внутри формы и атрибут type отсутствует, браузер посчитает, что тип кнопки — submit и попытается отправить форму обработчику.
Несмотря на слухи, которые ходят в интернете, о том, что тег должен располагаться только внутри тегов , на самом деле это не так 🙂 Если вдруг по какой-то причине Вам нужно или хочется поместить свою кнопку вне формы, которую она должна отправлять/сбрасывать/еще-что-то-делать, просто используйте атрибут form со значением соответствующим атрибуту id этой формы.
Кроме того, у тега button могут быть следующие атрибуты:
- autofocus — Автоматически устанавливает фокус браузера на кнопке при загрузке страницы
- disabled — Кнопка заблокирована и нажатие на нее не выполняет никаких действий
- formaction (только для типа submit) — адрес обработчика формы, на который отправляются данные из формы
- formenctype (только для типа submit) — Тип отправляемых данных. Может быть application/x-www-form-urlencoded , multipart/form-data , text/plain
- formmethod (только для типа submit) — HTTP-метод, при помощи которого пересылаются данные. Может быть get или post
- formnovalidate (только для типа submit) — Отключает автоматическую валидацию введенных данных
- formtarget (только для типа submit) — Указывает на то, как выводится результат обработки формы. Может быть _blank , _self , _parent , _top или значение атрибута name фрейма
- name — Имя кнопки (можно использовать если, например, в форме есть несколько кнопок, которые ее отправляют, и обработчику нужно знать, какая из них нажата)
- value — Значение кнопки (смысл примерно тот же, что и с name)
Совет: используйте только быстрый и надёжный хостинг для своих сайтов, например Beget.com
Как сделать красивую кнопку в HTML и CSS?
У каждого из нас свое представление о красоте: кто-то считает красивым закат на берегу моря, а кто-то — Ниссан Жук. О вкусах, как говорится, не спорят.
В моем представлении красивая кнопка — это кнопка, которая обладает следующими качествами:
Является интерактивной (т.е. реагирует на взаимодействие с ней пользователем). Отличительной чертой кнопок, является то, что их можно нажимать, следовательно у кнопки должно быть несколько состояний: дефолтное (состояние «покоя»), нажатое и «ховер» (при наведение курсора)
Выделяется на фоне других элементов. Посетители вашего сайта в основном бегло сканируют страницу в поисках нужной им информации. Если вам нужно, чтобы они нажимали на кнопки, сделайте их максимально заметными, контрастными. Главное не перестарайтесь.
Выглядит привычно и современно. Ваши посетители постоянно взаимодействуют с интерфейсами других сайтов и приложений. Поэтому они привыкли, что кнопки выглядят именно так, а не иначе. Если, в попытке привлечь их внимание, вы будете изобретать велосипед, пользователи могут просто не понять, что это кнопка.
Кроме того, тренды в дизайне интерфейсов и технологии их создания постоянно меняются, и за ними нужно успевать.
Если вы хотите узнать как сделать кнопку объемной или с эффектом «стекляшечности», как сделать картинку кнопкой и т.д. — почитайте статьи по дизайну интерфейсов за 2005-2009 гг. 🙂
Еще одним пунктом я бы добавил, расположение кнопки в привычных для посетителей местах (например, кнопки входа/регистрации в правом верхнем углу, или кнопка отправки формы под формой). Но это уже больше относится к дизайну всей страницы.
Итак, давайте для начала сделаем две обычные кнопки, одна из которых должна открывать модальное окно (кнопка-действие — ) с формой для входа, а вторая — вести на страницу регистрации (кнопка-ссылка — ). При этом обе кнопки будут выполнены в одной стилистике.
Для вывода иконок в кнопках, да и, в общем-то, везде я использую замечательный шрифт FontAwesome, а для текста — бесплатный шрифт Roboto, с которым одинаково хорошо смотрятся как кириллические, так и латинские символы.
.button < /* Сбрасываем дефолтные стили */ border: none; outline: none; display: inline-block; text-align: center; text-decoration: none; cursor: pointer; font-size: 16px; /* Можно также использовать любые встроенные и кастомные шрифты, например, отсюда */ font-family: Roboto, Verdana, Tahoma, sans; /* Тут можно поэкспериментировать */ padding: 12px 16px; border-radius: 100px; color: #fff; >.button i < margin-right: 4px; >.button + .button < margin-left: 6px; >.button.blue < background: #2196F3; >.button.purple
Теперь добавим интерактивности: при наведении кнопки будут слегка подсвечиваться, а при нажатии затемняться (как бы утапливаться).
.button:hover < box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); >.button:hover.blue < background: #39a1f4; >.button:hover.purple < background: #a66bbe; >.button:active < box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); >.button:active.blue < background: #0d8aee; >.button:active.purple
Вот и все! Две симпатичные кнопки готовы.
При наличии желания и времени можно их дополнить плавными анимированными переходами. Вот несколько примеров:
А теперь обещанный бонус для тех кто дочитал этот пост до конца.
Красивая анимированная кнопка наверх для сайта
#scroll-top < position: fixed; bottom: 48px; right: 48px; >#scroll-top button < position: relative; overflow: hidden; height: 48px; width: 48px; border: none; outline: none; cursor: pointer; color: rgba(0, 0, 0, 0.3); font-size: 16px; background: #21c984; transition: width 0.5s; border-radius: 100px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); >#scroll-top button span < display: inline-block; transition: opacity 0.3s ease 0s, transform 0.5s ease 0s; line-height: 48px; font-size: 20px; width: 100%; >#scroll-top button span::before < width: 100%; position: absolute; left: 0px; top: 200%; opacity: 0; content: attr(data-hover); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); color: #fff; font-size: 16px; text-transform: uppercase; >#scroll-top:hover button < width: 120px; background: #9b59b6; >#scroll-top:hover button span < -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); transform: translateY(-200%); >#scroll-top:hover button span:before < opacity: 1; >#scroll-top button:active
jQuery(document).ready(function($) < $(«#scroll-top >button»).on(«click», function(e) < var body = $(«html, body»); body.stop().animate(< scrollTop: 0 >, 500, «swing»); >); >);
В итоге должно получиться что-то похожее на это 😉
Надеюсь, эта статья была для вас полезна. Буду рад ответить на ваши вопросы в комментариях.
Источник: siterost.net