подписка
Подписаться
Главная Форум Удержание клиентов Дизайн и usability

Выпуклая, кликабельная, трёхмерная кнопка номера телефона для мобильных устройств

Подписка на RSS
qualified
20/01/2015
Здравствуйте уважаемые коллеги! Хочу сделать на сайте кнопку при нажатии, на которую на мобильном устройстве, чтобы набирался номер телефона нашего магазина. Программисты сказали, что это можно сделать с помощью текста или ссылки, но меня это не очень устраивает. Я хочу, чтобы кнопка была выпуклая и трёхмерная, и чтобы на неё хотелось нажать. Программисты обещали подумать.

Примерно кнопка должна выглядеть вот так: http://button.dekel.ru/

Коллеги, подскажите, как это лучше реализовать?
Скопировать ссылку на сообщение
Ответить
kbalyasnikov
20/01/2015
Делать нужно действительно через ссылку, например так:
Код: Выделить всё
<a class="call-btn" href="tel:12345">12345</a>


А как будет выглядеть ссылка определяется через CSS. Немного JS позволит отобразить кнопку в нажатом состоянии.

Любой фронтенд-программист Вам поможет, работы на полчаса-час. Можно на fl.ru найти исполнителя.
Скопировать ссылку на сообщение
Ответить
qualified
20/01/2015
kbalyasnikov, сколько может стоить?
Скопировать ссылку на сообщение
Ответить
kbalyasnikov
20/01/2015
Вот Вам решение :)

http://jsfiddle.net/9h9mt1vm/

Только картинку поставьте какую Вам надо.
Скопировать ссылку на сообщение
Ответить
qualified
20/01/2015
kbalyasnikov, спасибо, отправлю ссылку программистам.
Скопировать ссылку на сообщение
Ответить
Sergeysport
21/01/2015
Если надо показывать только для мобильных устройств, есть готовый код для PHP или JavaScript.
Например, здесь
http://detectmobilebrowsers.com/
Там в конце прописан переход на этот сайт:
Код: Выделить всё
header('Location: http://detectmobilebrowser.com/mobile');

Если на PHP, этот кусок заменить на показ кнопки. Завести переменную
Код: Выделить всё
$DisplayButton="inline-block";

А в самом начале прописать
Код: Выделить всё
$DisplayButton="none";

В html коде добавить стиль с переменной, который будет задавать видимость, когда $DisplayButton="inline-block";
Код: Выделить всё
<a href="tel:12345" style="display:@DisplayButton@" class="call-btn"></a>


Пример kbalyasnikovа на JQuery 1.11.0
Если на странице, где будет кнопка нет подгрузки JQuery, то работать не будет.
Надо ее загрузить отсюда http://jquery.com/download/ в какую нибудь папку у себя на сервере.
И внутри тега head прописать путь.
Примерно так:
Код: Выделить всё
<head><script src="тут путь до папки/jquery1_11_0.js">
</script><head>
Скопировать ссылку на сообщение
Ответить
qualified
21/01/2015
Sergeysport, спасибо!
Ответить