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

Сообщение **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** » 05 дек 2018, 20:19

Управляемое изображение и всего делов http://p951355n.bget.ru

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

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

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

При наведении на объект-hover(a.button:hover {})
При нажатии на объект-active(a.button:active{})

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SuperBatya, Все понял, :co_ol:

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

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

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

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

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

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

Сообщение **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** » 07 дек 2018, 14:46

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

Скрытый текст

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

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

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

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

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

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

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

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

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

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

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

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

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

Добро пожаловать на форум!