Как сделать кнопку на сайте ссылкой. Кнопка на сайт


Плавающая кнопка на сайте сбоку

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

Для примера возьмем стандартную wordpress тему – Twenty Eleven.

Вот так будет выглядеть создаваемая нами кнопка:

плавающая кнопка на сайт

плавающая кнопка на сайт

Демо-пример можно посмотреть тут:

http://mnogoblog7.p.ht/

 

Приступим:

1. Заходим в файл стилей style.css – для этого входим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл style.css.

После в самый низ файла style.css вставим следующий код:

.add_comment { display:block; width:30px; height:150px; position:fixed; left:0; top:200px; z-index: 99999; }

Где:width:30px; – ширина кнопки.height:150px; – высота кнопки.left:0; – отступ слева, если вы поменяете данную строчку на right:0;  – то кнопка будет располагаться справа, также можно указать отступ в пикселях, например: left:20px;top:200px; – верхний отступ.z-index: 99999; – задает расположение элемента поверх всех остальных, например у картинки шапки в теме Twenty Eleven данный параметр имеет значение 9999 и если ваша кнопка будет иметь значение ниже данного параметра, то она будет располагаться под ней.

Также можно добавить строчку:

background:#2B96C6; – она задает фон кнопки, можно задать как цвет, так и картинку.

 

2. Заходим в файл header.php – – для этого входим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл header.php.

В нем сразу после тега body вставляем вывод нашей кнопки:

<a href="ссылка на открываемую страничку">Текст кнопки</a>

Как видите это код обычной ссылки, только для нее задан особый класс –class=”add_comment”, стиль оформления которого мы прописали в пункте 1 данной статьи.

 

3.Чтобы придать дизайн кнопке, нужно создать для нее изображение.

Можно скачать кнопку в интернете и подкорректировать ее в Photoshope (или другом графическом редакторе), как я и сделал для данной кнопки, незабываем, что размер кнопки мы задаем в файле стилей style.css (пункт 1 данной статьи), в данном примере она имеет размеры: 30*150 px, следовательно и изображение для кнопки должно быть 30*150 px.

У меня получилось следующее изображение:

кнопка поддержи блог

кнопка поддержи блог

Можете скачать ее и попробовать вставить ее к себе на сайт или на тестовый сайт на каком-нибудь бесплатном хостинге (я так пользуюсь hostinger.ru).

Теперь давайте привяжем данное изображение к кнопке, для этого изменим код вывода кнопки, который я предлагал в пункте 2 данной статьи, на следующий:

<a href="ссылка на открываемую страничку"><img alt="buttons" src="/800/600/https/mnogoblog.ru/wp-content/uploads/2013/04/buttons.gif" /></a>

Вот и готова наша кнопочка, осталось только добавить ссылку на нужную нам страничку, например так:

<a href="https://mnogoblog.ru/ob-avtore"><img alt="buttons" src="/800/600/https/mnogoblog.ru/wp-content/uploads/2013/04/buttons.gif" /></a>

Все готово!

PS: Как сделать, чтобы кнопка была не видна на конкретной страничке.В файл header.php нужно прописать следующее.В данном примере, кнопка будет не видна на записи с id=1 – как посмотреть какой id у записи? – достаточно в панели управления wordpress зайти в пункт “Записи”, подпункт “Все записи”, открыть в Редакторе нужную запись и в адресной строке браузера у вас отобразиться id записи, например, если в адресной строке видим следующее “https://mnogoblog.ru/wp-admin/post.php?post=1&action=edit”, соответственно id странички равен 1.

<?php if(is_single(1)) { // если запись имеет ID=1 include 'single-290.php'; } else { ?> <a href="https://mnogoblog.ru/ob-avtore"><img alt="buttons" src="/800/600/https/mnogoblog.ru/wp-content/uploads/2013/04/buttons.gif" /></a> <?php } ?>

mnogoblog.ru

Как создать кнопку для сайта на онлайн сервисах

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

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

Как создать кнопку для сайта на онлайн сервисах 

Это вам тоже может быть интересно:

Daruse.ru

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

Как создать кнопку для сайта на онлайн сервисах

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

Ниже генератора есть поле, в котором находится HTML код. Этот код можно использовать на сайте, установив в то место, где должна выводиться кнопка.

Maxzon.ru

Это более сложный инструмент, и создание кнопки для сайта на нём потребует некоторого времени, так как настроек здесь уйма, можно подкрутить всё, что угодно. Находится он тут.

Как создать кнопку для сайта на онлайн сервисах

Есть возможность настроить вид кнопки в обычном состоянии, при наведении мышки и при нажатии. Можно настраивать размеры самой кнопки, шрифта, а также все цвета. Можно создать множество разнообразных эффектов.

Когда с настройками вы наиграетесь, нажмите кнопку «Получить код и стиль кнопки». В результате вы получите HTML и CSS код кнопки. HTML код нужно установить на сайте в том месте, где должна быть кнопка. Вместо символа # в этом коде следует записать ссылку, которая будет открываться при клике на неё. CSS код нужно установить в файл стилей. В WordPress это файл темы style.css, либо тема может поддерживать внедрение стороннего кода в своих настройках.

После установки обоих кодов кнопка будет работать.

Dbmast.ru

Этот генератор кнопок представляет собой нечто среднее между первым и вторым инструментом, которые я описал. Здесь тоже есть достаточно много настроек для дизайна кнопки, но не такое количество, чтобы тратить на них много времени. Находится он здесь.

Как создать кнопку для сайта на онлайн сервисах

Традиционно есть настройки для размера кнопок и шрифта, цветов и формы. Можно задать эффект при наведении и нажатии на кнопку. Всё интуитивно понятно.

Чтобы получить код кнопки, нажмите на саму кнопку на предпросмотре. Вы получите CSS стиль. Его поместите в файл темы style.css или в настройки темы, если такие у вас есть. А чтобы вывести саму кнопку в нужном месте, используйте такой код:

<a href="#"/>Текст на кнопке</a>

<a href="#"/>Текст на кнопке</a>

Замените символ # на нужную вам ссылку, и укажите необходимую вам надпись на кнопке.

wp-system.ru

Как сделать кнопку на сайте ссылкой. Как создать кнопку для сайта.

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

Сделать красивую кнопку сейчас можно различными способами и множеством сторонних программ. Один из самых простых, распространённых и часто используемых способов — это создать кнопку в Photoshop и разместить её на сайте.

Кнопка, созданная в каком либо графическом редакторе, например Photoshop — это обычная картинка, сохранённая в одном из графических форматов используемых в web-технологиях: GIF, JPEG или PNG, а следовательно на вставку таких картинок распространяются и все правила вставки изображений в HTML. Не буду тратить время, а сразу приведу пример вставки изображений для кнопки.

1. <img src=»files/img/img.jpg» width=»200″ height=»67″>Поясню, графический файл (картинка кнопка), имеет следующие параметры: имя img.jpg, ширина 200 пикселей, высота 67 пикселей, путь до этого файла (лежит на сайте) files/img/img.jpg.

Второй важный момент — это создание ссылки. В примере 2, приведен код текстовой ссылки, которая ведет на главную страницу моего сайта http://www.seoklub.ru/

2. <a href=»http://www.seoklub.ru»>http://www.seoklub.ru/</a>Естественно в якоре ссылки вы можете указать любой нужный Вам текст. А теперь наша задача совместить в коде web-страницы вставку картинки и в качестве якоря ссылки указать не текст а картинку (графический файл) в данном случае это будет наша с Вами кнопка (графический файл img.jpg). 3. <a href=»http://www.seoklub.ru/» target=»_blank»><img src=»files/img/img.jpg» alt=»Главная страница»width=»200″ height=»67″ border=»0″></a>Теперь сделаем относительную ссылку (относительная ссылка — это ссылка работающая в пределах одного сайта). 4. <a href=»articles.html» target=»_blank»><img src=»files/img/stat.jpg» alt=»Статьи сайта seoklub.ru»width=»200″ height=»67″ border=»0″></a>Вот собственно говоря и всё, естественно у Вас будут свои имена графических файлов, свои ширина и высота картинок, свои пути до этих картинок и конечно же в коде вставки кнопок Вы должны верно указать все эти параметры!

На что еще хочу обатить Ваше внимание. При использовании в качестве якоря ссылок картинки, обязательно добавляйте параметр border=0 иначе вокруг картинки-ссылки будет отображаться рамка, которая во многих случаях очень сильно будет портить дизайн Вашего сайта.

Есть вот такой интересный сервис — dabuttonfactory.com. Этот сервис абсолютно бесплатный. Там можно выбрать разные дизайны кнопочек и сделать на них нужные надписи. Я покажу процесс создания кнопочки на примере.

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

Первое поле TEXT — вводим здесь текст, который должен быть на кнопке. Например, я ввожу НОВОСТИ. Изменения сразу видны в центре экрана.

Выбираем шрифт Font. Выбираем Sans — serif, Bold — Жирный, Italic — курсив. Отметьте галочкой то, что нужно. Я оставляю Bold, галочку с Italic снимаю.

Size размер шрифта. Плюсиком или минусом можно увеличивать или уменьшать. Я остановилась на 17.

Color — цвет шрифта. Если кликнуть по этому окошку, можно выбрать на палитре нужный цвет. Я оставляю белый. Чтобы палитра свернулась после того, как Вы выбрали нужный цвет, кликните в любую область экрана или нажмите кнопку Escape.

Text Shadow — тень у текста. Distance — расстояние от текста до тени, Color — цвет тени. Пробуйте. Вы будете видеть результат.

Output type — Формат готового варианта. Нам нужна картинка Image, пусть будет в формате jpeg.

Переходим к правой части экрана. Button Type — возможные варианты — круглая, квадратная и с закругленными углами. Я оставила круглую.

Background — фон кнопки. Можно выбрать моноцвет, то есть один цвет, два цвета, градиент — перелив от одного цвета к другому. Соответственно, цвета выбрать рядом. Поэкспериментируйте. Я выбрал градиент от желтого к оранжевому.

Border — граница кнопки, обводка другими словами. Если поставить тут галочку, то нужно выбрать размер границы и цвет. Я этот параметр не включаю.

Shadow — тень кнопки. Также нужно выбрать цвет тени и расстояние от кнопки до тени. Делайте как больше нравится. Я делаю без тени.

Size — размер кнопки. Variable — варьируется в зависимости от длины текста на кнопке. Можно задать интервалы, которые должны быть вокруг текста. Я выбираю Fixed — фиксированный размер (то есть независимо от длинны текста). И задаю ширину — 150 и высоту 50.

Теперь Вам нужно сохранить вашу кнопочку на вашем компьютере. Для этого кликаем по ней. Выскакивает окошко сохранения файла button.jpeg. Дальше Вы уже знаете, что с ней делать — разместить на сайте и превратить картинку в ссылку, которая будет вести посетителя на нужную страницу вашего сайта.

seoklub.ru