Создание Landing Page самому под ключ.

image5

Научись сам как сделать кнопки для сайта.
Свои "Кнопки для сайта" используя CSS программирование

БЕСПЛАТНО РАДИ АЛЛАХА

Никогда раньше не было так просто! Наконец, решение, было выявлено!
Эта горячая тема осуществляет гигантский скачок вперед.

Построй профессиональные продающие страницы установив стильные CSS кнопки с призывом к действию у себя на сайте.

image7
image6
  • Ваши кнопки будут нравиться вашим клиентам
  • Вы будете получать от них много кликов
  • У вас появится возможность продавать

Работа состоит из 5 шагов.

image7
image6
Весь процесс от начала и до конца займет у вас не более 15 минут, ато и меньше.
Шаг 1
  • Переходим на сайт.
Шаг 2
  • Генерируем кнопку
Шаг 3
  • Создаем файл CSS
Шаг 4
  • Подключаем стили
Шаг 5
  • Выводим кнопку

Доброго времени суток уважаемый обозреватель!
Мир вам! Cегодня наиболее подробно и понятно опишу как выводить css кнопки в нужных нам местах нашего сайта Wordpress, и при этом на всех страницах, т.е на любой нужной нам странице сайта, а не только на главной странице.

1) Итак заходим в бесплатный online сервис: генератор кнопок css который расположен по адресу http://maxzon.ru/, этот сервис показался мне наиболее лучшим среди остальных и интуитивно понятным. Там можно сделать хорошую кнопку на любой вкус которая будет изменять свой цветовой эффект как при наведении, так и при нажатии, вот как то так:

2) Гегерируем там нашу кнопку
image7
image6
По умолчанию получаем два таких куска кода, ЕСЛИ КНОПКА СОВСЕМ ПРОСТАЯ, то второй код б) будет покороче, а если кнопка имеет 3 эффекта, тогда этот код будет длиннее как НАПРИМЕР у меня:
а)   a href="#" class="button" данный код должен быть закрыт с обеих сторон такими скобками <> и далее все куски кода тоже должны быть закрыты таким образом.  Тег href="#" в данном моем случае я вообще не использую и сразу удалю, потом объясню почему

б) .button{text-decoration:none; text-align:center;
padding:12px 37px;
border:solid 5px #ffffff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
font:17px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#ffffff;
background:#ff0000;
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-webkit-transition: background 0s linear;
-moz-transition: background 0s linear;
-o-transition: background 0s linear;
transition: background 0s linear;
}
.button:hover{padding:12px 37px;
border:solid 5px #ff0000;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
font:17px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#ff0000;
background:#ffffff;
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
.button:active{
padding:12px 37px;
border:solid 5px #ffffff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
font:17px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#000000;
background-color:#f7ff00;
background-image: -moz-linear-gradient(top, #f7ff00 0%, #fff700 100%);
background-image: -webkit-linear-gradient(top, #f7ff00 0%, #fff700 100%);
background-image: -o-linear-gradient(top, #f7ff00 0%, #fff700 100%);
background-image: -ms-linear-gradient(top, #f7ff00 0% ,#fff700 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff700', endColorstr='#fff700',GradientType=0 );
background-image: linear-gradient(top, #f7ff00 0% ,#fff700 100%);
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
image9

ЗДЕСЬ ВНИМАНИЕ!!! я бы посоветовал вам, как это сделал я у себя, после того как намучался и тратил много времени, заменить в кодах:

б) .button заменить на  #любое название,  то есть   .  на  # ,  я например указал  #knopka,  то есть заменил .button  на  #knopka

а) class="button" заменить на id="ваше название из первого кода"  я например указал id="knopka",  то есть class="button" заменил на id="knopka" потому что в коде б)  button заменил на knopka .
3) Далее создаем файл  ваше_название.css, в бесплатной программе Notepad++ скачать ее можно по адресу https://notepad-plus-plus.org , например это будет документ knopka.css, название вы можете задавать какое пожелаете но обязательно файл должен быть с расширением .css, помещаем в него код наших стилей и заливаем этот наш_файл.css в корневой каталог нашего сайта public_html, через файловый менеджер нашего хостинга или через бесплатную программу ftp клиента filezilla, которую можно скачать на сайте http://filezilla.ru/
4) Далее подключаем наши стили с помощью одного из этих двух кусков кода

link rel="stylesheet" type="text/css" href="http://наш_сайт.ru/название_нашего_файла.css"> или
link rel="stylesheet" type="text/css" href="название_нашего_файла.css" 

у меня это

link rel="stylesheet" href="http://marketing.gtgroup.company/knopka.css" или
link rel="stylesheet" type="text/css" href="knopka.css" в разделе head, в header.php нашего wordpress сайта, прямо перед закрывающим тегом /head> . Находится он в админ панели нашего сайта во вкладке внешний вид > редактор > header.php итак вставили, незабываем обновить файл, нажав кнопку снизу обновить файл. данный код должен быть закрыт с обеих сторон такими скобками <>

5) Далее выводим нашу кнопку в любом нужном месте нашего сайта, любое количество штук, и на всех любых страницах нашего сайта, а не только на главной странице.

Если бы мы ранее не заменили:

б) .button как я например на #knopka
и
а) class="button" как я например на id="knopka" тогда нам пришлось бы вставить код по умолчанию полученный из генератора кнопок текст и тогда у нас возможно произошел бы конфликт и были подключены заместо стилей нашей желанной кнопки из генератора, стили кнопки из нашей темы, которая не то что нам нужно.

К тому же на эту же кнопку я с помощью дополнительного селектора class="" добавляю функцию вызова всплывающего окна с функцией обратного звонка CallMe и полный код моей ссылки, для вызова моей кнопки выглядит так

a id="knopka" class="callme_viewform" ЗАКАЖИТЕ ЧТОБЫ МЫ ВАМ ПЕРЕЗВОНИЛИ /a данный код должен быть закрыт с обеих сторон такими скобками <> и закрывающий тег /a тоже.

и работает она вот так ЗАКАЖИТЕ ЧТОБЫ МЫ ВАМ ПЕРЕЗВОНИЛИ

потому что всплывающее окно, при установке модуля обратного звонка, вызывается присвоением любому элементу или строке, класса class="callme_viewform", в моем случае это кнопка заказа обратного звонка.

Вот как-то так! Всем спасибо за внимание!

image8
image5

Свои "Кнопки для сайта" используя CSS программирование

Никогда раньше не было так просто! Наконец, решение, было выявлено! Эта горячая тема осуществляет гигантский скачок вперед.