Сделать ссылку HTML с оформлением кнопки CSS. Html код кнопки для сайта со ссылкой


Сделать ссылку HTML с оформлением кнопки CSS

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

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

Как правильно вставить ссылку в HTML

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

Код

<a href="//zornet.ru" >Как сделать ссылку на переход</a>

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

1. download - что отвечает за указание на файл под скачивание файла, архива и другое.

2. name – тот самый якорь.

3. title — это когда наводит клик и появляется подсказка, что за ранее была прописана при установке.

4. accesskey — здесь происходит активация ссылки, что срабатывает при комбинации заданных клавиш.

5. coords – выставляет координаты, что прописаны в активной области.

6. hreflang – распознает язык текста по установленной ссылки.

7. rel — здесь идет соотношение между теми ссылками, что прописаны текущим документами.

8. rev — производится соотношение между текущим и куда будет ссылаться документ.

9 shape — отвечает за указание формы области ссылки на картину или изображение.

10. tabindex — Будет происходить указанная последовательность переключения между поставленными ссылками при клике на клавишу Tab.

11. target — показание окна, где будет сохранен скаченный файл при выборе.

12. type — тип или название документа, куда происходит переход.

Как сделать открытие ссылки в новой вкладке

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

Пример HTML-кода ссылки на открытие новой страницы.

Код

<a href="http://zornet.ru" target="_blank">Здесь делаем клик на переход</a>

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

Код

<a href="ссылка" target="_blank">Ключевое слово</a>

Она же трастовая ссылка:

Код

<a href="Ссылка" rel="" target="_blank"><u>Перейти на интернет ресурс ZorNet.Ru</u></a>

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

Код

<a href="ссылка" target="_blank"><img src="http://zornet.ru/CSS-ZORNET/gerav/refad/faren/demo.png" ></a>

Как сделать ссылку на скачивание файла, архива

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

Вставить ссылку в HTML и оформить ее в CSS

Код

<a href="http://zornet.ru/_ld/81/8168_Psatun.rar" target="_blank" download="">Скачать </a>

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

Как сделать из ссылки кнопку с эффектом

Безусловно самым лучшим оформлением под ссылку идет оформление кнопки, это задействуем CSS при создание.

Так будет идти HTML-код под ссылку:

Код

<div> <a href="http://zornet.ru" target="_blank" >Открыть</a> </div>

CSS

Код

.zornet_ru a {   display:block;   width:100px;   margin:auto;   padding: 9px 17px;   background:#3d9c3e;   color:#fff!important;   text-decoration:none;   font-size:17px;   text-align: center;   border: 2px solid #c5baba;   border-radius: 34px; }

.zornet_ru a:hover {   color:#fff!important;   text-decoration:none!important;   background:#38cc3a; }

Такая кнопка получится.

Это по умолчанию:

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

Здесь уже задаем палитру цвета в hover - где только срабатывает при наведение.

Кнопка скачать с эффектом при наведение

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

zornet.ru

css - Как сделать ссылку html похожим на кнопку?

Много запоздалый ответ:

Я боролся с этим, когда я впервые начал работать в ASP. Здесь лучшее, что я придумал:

Концепция: Я создаю настраиваемый элемент управления с тегом. Затем в кнопке я помещаю событие onclick, которое устанавливает document.location в нужное значение с помощью JavaScript.

Я вызвал элемент управления ButtonLink, так что я мог легко получить, если его путают с LinkButton.

ASPX:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %> <asp:Button runat="server"/>

код позади:

Partial Class controls_ButtonLink Inherits System.Web.UI.UserControl Dim _url As String Dim _confirm As String Public Property NavigateUrl As String Get Return _url End Get Set(value As String) _url = value BuildJs() End Set End Property Public Property confirm As String Get Return _confirm End Get Set(value As String) _confirm = value BuildJs() End Set End Property Public Property Text As String Get Return button.Text End Get Set(value As String) button.Text = value End Set End Property Public Property enabled As Boolean Get Return button.Enabled End Get Set(value As Boolean) button.Enabled = value End Set End Property Public Property CssClass As String Get Return button.CssClass End Get Set(value As String) button.CssClass = value End Set End Property Sub BuildJs() ' This is a little kludgey in that if the user gives a url and a confirm message, we'll build the onclick string twice. ' But it not that big a deal. If String.IsNullOrEmpty(_url) Then button.OnClientClick = Nothing ElseIf String.IsNullOrEmpty(_confirm) Then button.OnClientClick = String.Format("document.location='{0}';return false;", ResolveClientUrl(_url)) Else button.OnClientClick = String.Format("if (confirm('{0}')) {{document.location='{1}';}} return false;", _confirm, ResolveClientUrl(_url)) End If End Sub End Class

Преимущества этой схемы: он выглядит как элемент управления. Вы пишете для него один тег, < ButtonLink id = "mybutton" navigateurl = "blahblah" / >

Результирующая кнопка является "реальной" кнопкой HTML и поэтому выглядит как настоящая кнопка. Вам не нужно пытаться имитировать внешний вид кнопки с помощью CSS, а затем бороться с разными взглядами на разные браузеры.

Пока возможности ограничены, вы можете легко расширить его, добавив больше свойств. Вероятно, что большинству свойств просто нужно "пройти через" к базовой кнопке, как это делалось для текста, включенного и cssclass.

Если кто-нибудь получит более простое, более чистое или иное лучшее решение, я был бы рад услышать его. Это боль, но она работает.

qaru.site

Делаем кнопку input ссылкой

01 авг Делаем кнопку input ссылкой

HTML-тег input предназначен для вывода разных полей и кнопок. Благодаря ему можно создавать элементы сайта, которые будут требовать от пользователя каких-то действий.

Но оказывается, созданная с помощью input, кнопка не предназначена для использования в качестве обычной ссылки. Но некоторые случаи требует от вебмастера использования html-тега input именно в качестве ссылки.

Оказывается исправить это вопиющие безобразием можно и к тому же не одним способом.

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

Самый надежный способ из всех – это использование чистого HTML без JS (Способ №1), так как ваш посетитель может использовать браузер с отключенным JavaScript или пользоваться каким-нибудь мобильным браузером, начисто лишенным понимания скриптов.

  1. Способ №1 – чистый HTML:

    <form action=“http://adminway.ru” method=“post”><input type=“submit” value=“Перейти на AdminWay.Ru” /></form>

    Выглядит это так:

    Этот способ открывает ссылку в этом же окне. Как сделать, чтобы все открывалось в новой странице, я не знаю и поэтому привел Способ №2

  2. Способ №2 – с использованием JS:

    <form><input type=“button” value=“Перейти на AdminWay.Ru” onClick=“window.location=‘http://adminway.ru’” /></form>

    Работает это так:

    В общем то внешних отличий мало, отличия только внутренние. Использование этого метода создания из input`а ссылки, я бы не рекомендовал, так как некоторые ваши посетители могут столкнутся с проблемой неработоспособности таких ссылок.

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

    <form><input type=“button” value=“Перейти на AdminWay.Ru” onClick=“window.open(‘http://adminway.ru’)” /></form>

Эти 2 нехитрые способа помогут использовать вам обычную HTML-кнопку в качестве ссылки. Я, честно, не знаю как такая ссылка будет передавать вес, но перенаправлять пользователей будет как надо.

Комментарии:

adminway.ru

Кнопки и ссылки в дизайне и коде (HTML, PHP) сайтов

Сегодня я хочу поделиться с читателями своих заметок кое-какими соображениями относительно таких простых и знакомых всем элементов дизайна сайтов, как кнопки и ссылки. Всё дело в том, что иногда (достаточно редко, что радует) на разных сайтах я замечаю неправильное оформление этих двух элементов, а именно несоответствие их внешнего вида их назначению.

Только на две вещи на сайте можно нажать — и получить от этого какой-то результат: это именно кнопки и ссылки. Так в чём же их отличие? В возложенных на них функциях.

Ссылка (а точнее гиперссылка) — это часть документа (HTML или PHP страницы), при нажатии на которую пользователь переходит на другой документ, страницу, файл или директорию. Таким образом, ссылки являются элементом навигации по сайту, т.е. пользователь только просматривает страницы сайта в пассивном режиме. Например, ссылкой может быть фраза «перейти на форум»: в этом случае юзер просто перенаправляется в этот раздел сайта в качестве пассивного наблюдателя.

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

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

В этом случае довольно полезно уметь верстать на HTML или уметь работать с PHP. Зная принципы этих технологий, определить как оформить данный элемент — как кнопку или как ссылку — довольно просто. Если в вёрстке вы бы сделали его тэгом <input> — это кнопка. Если тэгом <a href="" > — ссылка.

www.yanajy.com