Как реализовать такую кнопку

WYSIWYG Web Builder, вопросы которые не охвачены в других разделах.
Правила форума
1. Название темы должно кратко описывать суть вашего вопроса, темы типа: "Помогите", "Почему", "Что это", "Что-то глючит" - будут удаляться.
2. Задавая свой вопрос, постарайтесь предоставить максимум информации о проблеме, если есть возможность, приложите шаблон проекта *.wtp.
Подробнее: Правила создания новых тем и ответов на существующие темы.
Данный форум - это место обсуждения вопроса, а не техподдержка в классическом смысле. Все участники форума Web Builder по-русски с удовольствием вам помогут, если это будет в их силах.
Ответить Вложения 6
Аватара пользователя

Автор Темы
ferm111111
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 30 ноя 2018, 17:03
Версия Web Builder: 12.2.1

Как реализовать такую кнопку

Сообщение ferm111111 » 05 дек 2018, 19:40

Здравствуйте. Такой вопрос. Можно ли сделать кнопку в билдере такую?
кнопка1.jpg

Обычное состояние и в нажатом виде.
Как ее реализовать в билдере?


Имеется такой код

<html lang="en">
<head>
<meta charset="utf-8">
<title>Кнопка</title>
<link rel="stylesheet" href="style.css">
</head>

<body>



<a href="#" class="button teal">Заказать звонок</a>



</body>
</html>



И собственно файл css

/**
* Grey
*/
a.button {
-moz-box-shadow: inset 0 0 0 1px #63ad0d;
-webkit-box-shadow: inset 0 0 0 1px #63ad0d;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #eee;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));
background: -moz-linear-gradient(#eee, #e2e2e2);
background: linear-gradient(#eee, #e2e2e2);
border: solid 1px #d0d0d0;
border-bottom: solid 3px #b2b1b1;
border-radius: 3px;
box-shadow: inset 0 0 0 1px #f5f5f5;
color: #555;
display: inline-block;
font: bold 12px Arial, Helvetica, Clean, sans-serif;
margin: 0 25px 25px 0;
padding: 10px 20px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 #fafafa; }

a.button:hover {
background: #e4e4e4;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));
background: -moz-linear-gradient(#e4e4e4, #ededed);
background: linear-gradient(#e4e4e4, #ededed);
border: solid 1px #c2c2c2;
border-bottom: solid 3px #b2b1b1;
box-shadow: inset 0 0 0 1px #efefef; }

a.button:active {
background: #dfdfdf;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));
background: -moz-linear-gradient(#dfdfdf, #e3e3e3);
background: linear-gradient(#dfdfdf, #e3e3e3);
border: solid 1px #959595;
box-shadow: inset 0 10px 15px 0 #c4c4c4;
top:2px;}


/**
* Teal
*/
a.button.teal {
background: #b7f2f4;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#b7f2f4), to(#81e8eb));
background: -moz-linear-gradient(#b7f2f4, #81e8eb);
background: linear-gradient(#b7f2f4, #81e8eb);
border: solid 1px #87d3d5;
border-bottom: solid 3px #4fa7aa;
box-shadow: inset 0 0 0 1px #d4f8f8;
color: #437b7d;
text-shadow: 0 1px 0 #bef3f5; }

a.button.teal:hover {
background: #8deaed;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#8deaed), to(#9fedf0));
background: -moz-linear-gradient(#8deaed, #9fedf0);
background: linear-gradient(#8deaed, #9fedf0);
border: solid 1px #79c5c7;
border-bottom: solid 3px #4fa7aa;
box-shadow: inset 0 0 0 1px #b9f2f5; }

a.button.teal:active {
background: #84e4e7;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#84e4e7), to(#80dcdf));
background: -moz-linear-gradient(#84e4e7, #80dcdf);
background: linear-gradient(#84e4e7, #80dcdf);
border: solid 1px #58999b;
box-shadow: inset 0 10px 15px 0 #75c9cc; }


Заранее благодарю.
У вас нет необходимых прав для просмотра вложений в этом сообщении.

Реклама
Аватара пользователя

dred
Втянувшийся
Втянувшийся
Сообщения: 60
Зарегистрирован: 01 фев 2016, 08:31
Версия Web Builder: 12.5
Имя: DREDD

Как реализовать такую кнопку

Сообщение dred » 05 дек 2018, 20:19

Управляемое изображение и всего делов http://p951355n.bget.ru
Многая речь на устах — еще не залог разуменья.

Аватара пользователя

Автор Темы
ferm111111
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 30 ноя 2018, 17:03
Версия Web Builder: 12.2.1

Как реализовать такую кнопку

Сообщение ferm111111 » 05 дек 2018, 22:32

dred, Это получается переход с картинки на другую картинку? или нужно куда-то вставлять код?
Она правда должна меняться не при наведении, а при нажатии...

Аватара пользователя

Alex1972
Подающий надежды
Подающий надежды
Сообщения: 112
Зарегистрирован: 27 окт 2016, 16:25
Версия Web Builder: 14.2.2
Имя: Alexandr

Как реализовать такую кнопку

Сообщение Alex1972 » 05 дек 2018, 23:48

При наведении на объект-hover(a.button:hover {})
При нажатии на объект-active(a.button:active{})
Я знаю все ответы,на все свои вопросы.Но не знаю,какой из этой массы ответов - правильный...

Аватара пользователя

dred
Втянувшийся
Втянувшийся
Сообщения: 60
Зарегистрирован: 01 фев 2016, 08:31
Версия Web Builder: 12.5
Имя: DREDD

Как реализовать такую кнопку

Сообщение dred » 06 дек 2018, 09:22

ferm111111, Ну да две картинки, управляемое изображение, код не нужно вставлять.Насчет нажатия не в курсе )
Многая речь на устах — еще не залог разуменья.

Аватара пользователя

SuperBatya
Сведущий
Сведущий
Сообщения: 197
Зарегистрирован: 18 сен 2016, 01:05
Версия Web Builder: 11.2.3

Как реализовать такую кнопку

Сообщение SuperBatya » 06 дек 2018, 11:55

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

Аватара пользователя

Автор Темы
ferm111111
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 30 ноя 2018, 17:03
Версия Web Builder: 12.2.1

Как реализовать такую кнопку

Сообщение ferm111111 » 06 дек 2018, 12:25

Это все не то, должна быть кнопка как слева, при нажатии она утапливается как справа.
Может быть в ответе Alex1972, таится разгадка. Боюсь для новичка не разгадать...

Аватара пользователя

dred
Втянувшийся
Втянувшийся
Сообщения: 60
Зарегистрирован: 01 фев 2016, 08:31
Версия Web Builder: 12.5
Имя: DREDD

Как реализовать такую кнопку

Сообщение dred » 06 дек 2018, 12:25

SuperBatya, Первая кнопка при нажатии просто исчезает, так и должно быть?
Многая речь на устах — еще не залог разуменья.

Аватара пользователя

Автор Темы
ferm111111
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 30 ноя 2018, 17:03
Версия Web Builder: 12.2.1

Как реализовать такую кнопку

Сообщение ferm111111 » 06 дек 2018, 12:54

SuperBatya, Первая кнопка при нажатии просто исчезает, так и должно быть?

В моем варианте - нет.
Если создать 2 файла которые описал выше и добавить их на сервер, должно быть так
Сюда не прикрепит файл css

Аватара пользователя

SuperBatya
Сведущий
Сведущий
Сообщения: 197
Зарегистрирован: 18 сен 2016, 01:05
Версия Web Builder: 11.2.3

Как реализовать такую кнопку

Сообщение SuperBatya » 06 дек 2018, 13:34

dred, просто наверное слетела картинка по пути... Исправь во вкладке "События" новый путь к изображениям...

Аватара пользователя

dred
Втянувшийся
Втянувшийся
Сообщения: 60
Зарегистрирован: 01 фев 2016, 08:31
Версия Web Builder: 12.5
Имя: DREDD

Как реализовать такую кнопку

Сообщение dred » 06 дек 2018, 14:04

SuperBatya, Все понял, :co_ol:
Многая речь на устах — еще не залог разуменья.

Аватара пользователя

Alex1972
Подающий надежды
Подающий надежды
Сообщения: 112
Зарегистрирован: 27 окт 2016, 16:25
Версия Web Builder: 14.2.2
Имя: Alexandr

Как реализовать такую кнопку

Сообщение Alex1972 » 06 дек 2018, 23:18

Это не загадка.
Я же написал-ховер,это поведение объекта при наведении курсора.А актив-это когда "нажал" курсором на объект.Наипростейший вариант нажатия-реализовать одноразмерными картинками.Нашлёпать их в фотошопе можно миллионы.
У Вас 2-е картинки
Первая-просто отображается,можно ховером бордюр подсветить при наведении.Затем нажимаете и начинается событие Актив
:active — событие, происходящее между моментом когда клавиша мыши была нажата, вплоть до момента, когда она была отпущена.
В этот период отображается картинка указанная бекграундом в пути - url(/директория на сервере с картинкой/картинка_при_нажатии.png).

a.button:active
{
background: url(/image/knopka2.png);
}



Можно пойти более "сложным"(многописным) путём,взять и описать стили бордюра,цвета шрифта,фона и тд фигуры(прямоугольника,овала и тд.).Фактически,утопленная кнопка,это изменение цвета.До нажатия бордюр светло-серый 1px+размер серой кнопки 49px на 9px(типа тень вокруг серой кнопки) и цвет шрифта темносерый.
При нажатии -бордюр серый 2px -кнопка 48px на 8px,фон кнопки - темно-серый,цвет шрифта-белый.
Я знаю все ответы,на все свои вопросы.Но не знаю,какой из этой массы ответов - правильный...

Аватара пользователя

Автор Темы
ferm111111
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 30 ноя 2018, 17:03
Версия Web Builder: 12.2.1

Как реализовать такую кнопку

Сообщение ferm111111 » 07 дек 2018, 11:33

Я так полагаю форум уже для продвинутых. Знать бы вообще где искать hover, activ и т.п. Это в изображении делать? или управляемое изображение или может куда-то вставить код, который я описал выше и все заработает?

Аватара пользователя

sinpai
Опытный
Опытный
Сообщения: 686
Зарегистрирован: 01 сен 2014, 11:19
Версия Web Builder: 12.5
Имя: Иван
Контактная информация:

Как реализовать такую кнопку

Сообщение sinpai » 07 дек 2018, 12:11

А что такого сложного в изначальном варианте?
Заходим в исходник страницы и между тегами head прописываем <link rel="stylesheet" href="style.css">
Потом после тега body прописываем <a href="#" class="button teal">Заказать звонок</a>
Создаем блокнотом файл style.css и в него помещаем конструкцию:
/**
* Grey
*/
a.button {
-moz-box-shadow: inset 0 0 0 1px #63ad0d;
-webkit-box-shadow: inset 0 0 0 1px #63ad0d;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #eee;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));
background: -moz-linear-gradient(#eee, #e2e2e2);
background: linear-gradient(#eee, #e2e2e2);
border: solid 1px #d0d0d0;
border-bottom: solid 3px #b2b1b1;
border-radius: 3px;
box-shadow: inset 0 0 0 1px #f5f5f5;
color: #555;
display: inline-block;
font: bold 12px Arial, Helvetica, Clean, sans-serif;
margin: 0 25px 25px 0;
padding: 10px 20px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 #fafafa; }

a.button:hover {
background: #e4e4e4;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));
background: -moz-linear-gradient(#e4e4e4, #ededed);
background: linear-gradient(#e4e4e4, #ededed);
border: solid 1px #c2c2c2;
border-bottom: solid 3px #b2b1b1;
box-shadow: inset 0 0 0 1px #efefef; }

a.button:active {
background: #dfdfdf;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));
background: -moz-linear-gradient(#dfdfdf, #e3e3e3);
background: linear-gradient(#dfdfdf, #e3e3e3);
border: solid 1px #959595;
box-shadow: inset 0 10px 15px 0 #c4c4c4;
top:2px;}


/**
* Teal
*/
a.button.teal {
background: #b7f2f4;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#b7f2f4), to(#81e8eb));
background: -moz-linear-gradient(#b7f2f4, #81e8eb);
background: linear-gradient(#b7f2f4, #81e8eb);
border: solid 1px #87d3d5;
border-bottom: solid 3px #4fa7aa;
box-shadow: inset 0 0 0 1px #d4f8f8;
color: #437b7d;
text-shadow: 0 1px 0 #bef3f5; }

a.button.teal:hover {
background: #8deaed;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#8deaed), to(#9fedf0));
background: -moz-linear-gradient(#8deaed, #9fedf0);
background: linear-gradient(#8deaed, #9fedf0);
border: solid 1px #79c5c7;
border-bottom: solid 3px #4fa7aa;
box-shadow: inset 0 0 0 1px #b9f2f5; }

a.button.teal:active {
background: #84e4e7;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#84e4e7), to(#80dcdf));
background: -moz-linear-gradient(#84e4e7, #80dcdf);
background: linear-gradient(#84e4e7, #80dcdf);
border: solid 1px #58999b;
box-shadow: inset 0 10px 15px 0 #75c9cc; }

Потом через Источник файлов подключаем style.css и все, пользуемся.
В css играйтесь с цветами, границами и т.д. И не забудьте привязать ссылку. Кнопка ведь должна что-то делать.
Советую, поройтесь в нете, масса классных решений кнопок на чистом css.
И грянет страшный русский ренессанс!

Аватара пользователя

Автор Темы
ferm111111
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 30 ноя 2018, 17:03
Версия Web Builder: 12.2.1

Как реализовать такую кнопку

Сообщение ferm111111 » 07 дек 2018, 14:46

sinpai, Зачем это делать? У меня есть два файла index.php и styles.css они уже залиты на хостинг и кнопка работает.


Скрытый текст
Для просмотра скрытого текста необходимо быть авторизованным пользователем.



Как это вставить в билдер???

Аватара пользователя

SuperBatya
Сведущий
Сведущий
Сообщения: 197
Зарегистрирован: 18 сен 2016, 01:05
Версия Web Builder: 11.2.3

Как реализовать такую кнопку

Сообщение SuperBatya » 07 дек 2018, 16:55

ferm111111, я же выкладывал тоже самое, что и у тебя, + исходник, который просто нужно доработать под себя...
У вас нет необходимых прав для просмотра вложений в этом сообщении.

Аватара пользователя

Автор Темы
ferm111111
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 30 ноя 2018, 17:03
Версия Web Builder: 12.2.1

Как реализовать такую кнопку

Сообщение ferm111111 » 07 дек 2018, 17:23

SuperBatya, вы меня извините. Пока для меня это все сложно. Но кажется, я понял, что нужно делать кнопку из картинки с анимацией

Аватара пользователя

sinpai
Опытный
Опытный
Сообщения: 686
Зарегистрирован: 01 сен 2014, 11:19
Версия Web Builder: 12.5
Имя: Иван
Контактная информация:

Как реализовать такую кнопку

Сообщение sinpai » 07 дек 2018, 23:02

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

Аватара пользователя

maklom
Читатель
Читатель
Сообщения: 6
Зарегистрирован: 09 дек 2018, 17:47
Версия Web Builder: 14.2.2

Как реализовать такую кнопку

Сообщение maklom » 09 дек 2018, 18:24

Здравствуйте, дорогие форумчане. Я абсолютный чайник в билдере. Опыт работы две недели. К тому же полный новичок на этом форуме. У меня примерно аналогичный вопрос по меню, поэтому не стал делать отдельный пост. Кто может подсказать каким образом, не зная языка html сделать подобное меню, как в ссылке: http://www.pianochap.com В имеющихся расширениях не нашёл изменения цвета кнопки в активном меню, только при мышке сверху или максимум изменения цветов текста при клике. Порылся в программах типа Easy Button & Menu Maker такого эффекта тоже нет, а проги типа AllWebsMenuPro слишком сложные для меня, да ещё и на английском. В доступных онлайн CSS меню генераторах тоже не смог найти нужного эффкета. Ещё раз - чего хотелось бы: основной бэкгрунд к примеру меню белого цвета, при наведении мышкой текст становится кнопкой в цвете и он остаётся таковой после клика в активном состянии. В идеале полупрозрачный фон цвета и конечно возможность менять цвет текста. Кто скинет ссылочку на такой генератор, заранее тому огромное спасибо! Хочу получить коды, а как их припаять в Билдер об этом спрошу уже позже. Сначала нужно найти то, что должно быть по замыслу создания страницы...

Аватара пользователя

Alex15963
Знаток
Знаток
Сообщения: 528
Зарегистрирован: 17 фев 2015, 13:13
Версия Web Builder: 10.4.4

Как реализовать такую кнопку

Сообщение Alex15963 » 10 дек 2018, 01:41

maklom Это можно сделать средствами Билдера. Навигация - CSS- меню


Ответить Вложения 6

Вернуться в «Общие вопросы.»

Кто сейчас на конференции

Сейчас этот форум просматривают: Google Adsense [Bot] и 1 гость