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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Здесь все настройки стиля кнопки указываются через атрибут "style" прямо в теле тега ссылки. 

А вот сервис C-WD.ru уже задействует атрибут "class", который позволяет связать тег ссылки со стилевым оформлением. Здесь у вас есть возможность изменить цвет кнопки и текста при наведении на неё курсора мыши и кнопка становится динамичнее. 

Какое решение применять, решать вам, всё зависит от ситуации где используется кнопка.

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

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

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

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

Кнопка в 100% ширины контейнера, картинка плюсика, градиентная заливка. Сервис хоть и на английском, но всё просто и понятно.

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

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

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

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

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

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

18:02
168
RSS
Иван
12:59
Отличная статья! Спасибо большое
13:06
Очень рад, что понравилась ))
Максим
11:27
Мне больше второй вариант нравится «C-WD.ru». Там дизайн лучше сделан и есть подсказки
12:53
ну он разве дизайном посимпатичнее, а решения похожи blush
Сергей Князев
01:25

Благодаря данному обзору решил улучшить свои инструменты. Прошу оценить -  C-WD. 

Первый вариант больше не работает.

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

20:12

Благодарю, обязательно посмотрю другие!

Загрузка...