Код кнопки html для сайта со ссылкой: Как кнопку сделать ссылкой? | WebReference

Кнопка html с ссылкой: примеры кода

При создании сайтов с нуля и на конструкторе один из частых вопросов – как сделать кнопку с сcылкой, не используя сложных кодов, программирования, Java Script, посредством одного html. Есть несколько способов сделать элемент, при нажатии на который происходит переход на определенную страницу.

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

Другая часть интерфейса – ссылки, их гораздо больше, чем кнопок. В виде простого текста (<a href=»адрес»>Ссылка</a>) они выглядят неприглядно, не всегда соответствуют дизайну. Основное правило оформления ссылок: пользователь должен понять, что перед ним не обычный текст без наведения мышью.

Кнопка и ссылка – разные понятия в html. Первая запускает какой-то процесс, вторая перенаправляет куда-либо.

Пример: оплата в интернете. Человек вводит номер карты в поле и нажимает «Оплатить». Нажатием запускается команда, написанная языком программирования: формируется запрос в банк, деньги списываются со счета. Если поля для заполнения останутся пустыми, при нажатии ничего не произойдет. Пользователь останется на том же месте, не произойдет никаких действий. Команда сработает только при соблюдении необходимых условий. То же произойдет при заполнении данными полей анкет, онлайн-калькуляторов, тестов. В этом случае это элемент <button>.

HTML запрещает комбинировать между собой <button> и <a>. Несмотря на это есть способы открытия страницы при нажатии на <button>.

Вложить <button>внутрь элемента <form> в html

Использовать JavaScript. Добавить к элементу <button> событие onclick, внутри него вписать document.location, значением будет адрес веб-страницы.

<button>Переход по ссылке</button>

Заставить кнопку действовать, как ссылка – нерациональное решение. Это перегружает код и повышает вероятность ошибок.

Если нужно перенаправить человека на другую страницу, линк стилизуют под кнопку. Для этого используют CSS.

CSS

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

Объектам придают практически любой вид при помощи html и эффектов CSS:

— Градиентная заливка

— Тень

— Изменение форм и размеров

— Оформление ссылки картинкой

— Перенаправление на телефонный номер или мессенджер 

— Меню-аккордеон (Сворачивающееся и разворачивающееся)

— Выпадающее меню

— Опции «Назад», «Вернуться вверх»

— Hover -эффекты (инверсия, изменение цвета и прозрачности, изменение размера, расположения объекта и многое другое)

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

1. Чистый html

Линк маскируется под кнопочку следующим образом:

1)Создать стандартный линк и указать адрес к стилям

2)Прописать стили, которые преобразуют линк в привычный прямоугольник:

<a>{

padding: 10px 10px;/* отступы от букв до краев */

text-decoration: none;/* убирает подчеркивание */

}</pre>

Каждая ссылка на странице станет выглядеть как кнопка.

2. Html/CSS

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

Нужно придумать и написать стиль:

<pre><link rel=»stylesheet» href=»link_button_3.css»>

<a href=»https://site.ru»>Ваша ссылка</a></pre>

<pre>.ssilka{ border:1px solid #ccc; /*рамка*/

background:#eaeaea; /*фон*/

padding: 10px 10px; /*отступы внутри*/

text-decoration: none; /*убрать подчеркивание*/ }</pre>

3. Добавить дизайн

В дизайне многостраничника, интернет-магазина, лендинга для Инстаграм в качестве кнопки используют фотографии, картинки, нарисованные в Фотошопе. Чтобы при клике на изображение срабатывал переход по ссылке, нужно:

Обернуть картинку тегом:

<pre><a href=»site.ru»><img src=»button.png»></a></pre>

Сохраняйте исходники кнопок, нарисованных в графическом редакторе. Если понадобится изменить информацию, придется рисовать заново.

Примеры использования

Последний метод применим при создании лендинга для Инстаграм в конструкторе Hipolink.net.

В разделе «Фото» можно вставить изображение, в настройках добавить к нему url. Клик на картинку переведет в магазин, другой раздел, сайт. Так картинка или фотография станут кнопкой.

Создание ссылок в виде кнопок предусмотрено одноименным разделом.

Знания html не понадобится: настройки интуитивно понятны для неопытного пользователя. Бесплатный тариф предоставляет опции редактирования формы и размера кнопок. На тарифах «Personal» и «Business» доступно изменение цвета, добавление иконок.

Социальные кнопки без плагина. Плавающий блок Css и Html

Главная » Создание WordPress блога » Настройка WordPress блога » Социальные кнопки без плагина. Плавающий блок Css и Html

8 июня | Автор З. Владимир | 18 комментариев

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

В данной статье, будет рассмотрен простой способ установить на сайте плавающий блок с кнопками «g+1» от Google, «Нравится» от Fasebook и «Твитнуть» от Twitter. А показываться он будет в левой от контента стороне сайта и передвигаться вместе с прокруткой страницы вверх или вниз.

Этот вариант плавающей панели, я уверен, пригодится не только для размещения социальных иконок, но и для других целей в оформлении статей или дизайна сайта. И, что самое главное, этот код будет работать во всех популярных браузерах. Даже в Internet Explorer. Слышали такое слово как Кроссбраузерность? Если нет — почитайте здесь.

♦ Как создать плавающий блок HTML

Открывайте ваш любимый текстовый редактор для работы с кодом, (у меня это Notepad++), скопируйте и вставьте в него HTML код представленный в следующем примере:

<div>
<div>
<!-- Twitter: -->
<!-- End Twitter: -->
</div>
<div>
<!-- Facebook: -->
<!-- End Facebook: -->
</div>
<div>
<!-- Google +1: -->
<!-- End Google +1: -->
</div>
</div>
<!--end socialbar div -->

Сделали? Этот и будет служить нам основной структурой плавающего блока, куда, впоследствии, добавим кнопки для сайта.
Идем дальше.

♦ Как добавить кнопки Twitter, Facebook и Google+ на сайт WordPress

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

1. Переходите по этому адресу https://about.twitter.com/ru/resources/buttons#tweet, выбираете настройки показанные на скриншоте, копируете код и вставляете его в только что созданный Html между <!— Twitter: —> и <!— End Twitter: —>

Рекомендую выбрать кнопку «Твитнуть» (поделиться ссылкой), так как она по размерам соответствует той вертикальной боковой панели которую мы создаем. Если выберите другую кнопку, скорее всего, придется сделать Html блок шире, чем предлагаю я.

2. Наступила очередь Facebook. Идем сюда https://developers.facebook.com/docs/reference/plugins/like/ и получаем код Facebook кнопки.
Но перед тем как нажимать на «Get Code» (получить код), нужно немножко поработать с настройками. Я выбрал вариант отраженный на картинке ниже.

Теперь постараюсь объяснить свои действия:
∗ В поле «URL to like», адрес который стоит там по умолчанию я удалил, иначе при нажатии посетителем на кнопку «Нравится», лайки будут ставиться на плагин Facebook (мое мнение) . При пустом же поле, будет автоматически подставляться адрес именно той страницы, на которой находится посетитель и которая ему понравилась. Я считаю, это оптимальный вариант.

Если же указать адрес главной страницы своего сайта, то и лайкать будут только ее, даже если посетитель нажмет кнопку на других страницах. В принципе, используя такой вариант, можно увеличить популярность важной для вас статьи или страницы. А что, неплохая ИДЕЯ!

∗ В поле «Layout» выбрал «button count» так как размер картинки со счетчиком подходят по ширине создаваемого блока.
∗ В поле «Action Type» оставил «Like» — нравится, так как от длины слова зависит ширина кнопки.
∗ Галочки в полях, «Show Friends Faces» (показать фото ваших друзей) и «Include Share Button» (включить кнопку «поделиться»), отключил. Мне эти функции не нужны, а вы, при желании, можете поэкспериментировать с ними.
∗ Теперь осталось нажать «Get Code» и увидеть следующее:

Здесь тоже не обойтись без комментариев:
FB советует первый код вставлять после открывающегося тега body, а второй в нужное место на странице. Но мы поступим по другому и оба кода, один за другим, вставим между тегами комментариев <!— Facebook: —> и <!— End Facebook: —>.
На этом шаге с Фейсбуком пока все. Идем дальше.

3. А дальше у нас Google+. Переходим сюда https://developers.google.com/+/plugins/+1button/, прокручиваем страницу немного вниз и находим там то, что отображено на картинке:

Копируете фрагмент кода и вставляете между <!— Google +1: —> и <!— End Google +1: —>. Сохраняете изменения.

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

♦ CSS стили для плавающего блока HTML

Здесь мудрить много не надо. Просто скопируйте ниже представленный стиль CSS и вставьте его перед HTML кодом. Cохраните файл и назовите его, например socialblok.html, или же придумайте свое название.

<style>
#socialbar {
position: fixed;
left: 10px;
bottom: 45%;
width: 105px;
height: 93px;
padding: 10px 5px;
text-align: center;
background-color: #d1d6e8;
border: 3px solid #999999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index:9999999;
}
. share-twitter {
height: 32px;
margin-bottom: 3px;
margin-right: 8px;
}
.share-facebook {
height: 32px;
margin-bottom: 3px;
}
.share-plusone {
height: 20px;
}
</style>

И так, мы подошли к завершающему этапу. Файл с кодами Html и CSS для плавающего блока у нас есть и теперь это «счастье» нужно как-то «присобачить» на свой сайт WordPress. Предлагаю, на данном этапе, пойти самым простым способом и разместить код на блоге с помощью виджета «Текст».
Для этого нужно выполнить три простых шага:
1) Войдите в админ-панель WordPress.
2) Нажмите «Внешний вид» ⇒ «Виджеты»
3) Из имеющихся виджетов в левой колонке, выберите, а затем нажмите и перетащите виджет «Текст» в правую колонку Сайдбара. Теперь скопируйте все, что находится в созданном вами файле socialbox.html, вставьте в виджет и сохраните изменения.

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

Заключение:
Конечно, всегда можно добавить другие кнопки и отредактировать CSS стили на свое усмотрение. Например, разместить плавающий блок не в левой стороне сайта, а в правой, заменив в стиле CSS лишь одну строчку — right: 10px; на left: 10px;.

Также, социальные иконки можно расположить горизонтально под каждой статьей, но для этого код Html блока нужно будет вставить в Single.php, а код CSS переместить вниз файла Style.css и обязательно подкорректировать под новое место расположения.
В общем, пробуйте, экспериментируйте, творите и у вас обязательно все получится.

На этом пока и удачи всем!
С огромным Уважением, Vladimir Zadorozhnyuk

Понравилась статья? Подпишитесь на новости блога или поделитесь в социальных сетях, а я отвечу вам ВЗАИМНОСТЬЮ

tweet

FB

G+

VK

OK

Прокомментировать (+)

Ваш комментарий (Спам не пройдет!!!) 

Кнопка «Мне нравится» — рейтинг для сайта

Основное

 Нажмите меня! 

 
Эта кнопка переводит вас на другой сайт!
 org" target="_blank">
Нажми меня!