$ USD 64.0688 ▲+0.1238
€ EUR 72.2440 ▼-0.1162

Кнопка-ссылка на сайт, всё просто!

Привет, Друзья!
Прежде чем приступить к созданию кнопки, давайте сначала немного пофилософствуем)).

Кнопки очень важная составляющая нашей жизни, они окружают нас везде; дома, на работа, на улице и конечно же в Интернете. Помните песню группы «Технология» — «нажми на кнопку, получишь результат»? Так вот, кроме шуток, но любая кнопка скрывает за собой действие пользователя, а действие это результат его выбора. Наша жизнь - игра, поэтому кругом кнопки, всё подчиняется определённому алгоритму.

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

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

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

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

1. Создание простой кнопки-ссылки, без анимации

Синтаксис такой кнопки очень простой, смотрите сами:

<a class="butn" href="#">РАЗМЕСТИТЬ ОБЪЯВЛЕНИЕ</a>

Это обычная ссылка, вида " РАЗМЕСТИТЬ ОБЪЯВЛЕНИЕ".
Чтобы превратить её в кнопку, достаточно добавить к ней немножечко стилей и получим вот такой вид:

РАЗМЕСТИТЬ ОБЪЯВЛЕНИЕ

Как видите это уже полноценная кнопка и даже курсор меняет свой вид при наведении. Привести к такому виду ссылку очень просто и быстро, как говорится на раз, два, три. Если есть под рукой нужный инструмент или знания HTML. 

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

Надеюсь какой-нибудь да из них будет работать, когда вы будете делать свою кнопку.
Мне лично понравился darus.ru, из-за своей компактности и простоты. Вот такой там интерфейс, очень простой:

Далее разберём способы добавления динамики, будем менять свет кнопки при наведении на неё курсора мыши с помощью стилей CSS.  Рассмотрим простейшие способы.

2. Анимация кнопки с помощью стилей

Самым простым способом для меня оказалось сделать кнопку с помощью сервиса  buttonoptimizer.com. Вот что у меня получилось в итоге:

РАЗМЕСТИТЬ ОБЪЯВЛЕНИЕ

На случай если сервис вдруг будет не доступен, посмотрите вот эти:

Вот собственно и всё о чём хотелось поделиться. 

Всем успехов и добра!

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

Всем успеха и добра!

18:02
59
RSS
Иван
12:59
Отличная статья! Спасибо большое
13:06
Очень рад, что понравилась ))
Загрузка...