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

Как сделать кнопку с функциональностью ссылки (html) [закрыт]

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

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.

Закрыт 6 лет назад .
Понимаю, что это азы и должно быть очень просто. вот кусок кода с ошибкой:

 
', '_blank');>
 

Подскажите, как создать кнопку в .html с GET-запросом при открытии ссылки в отдельном окне или как сделать так, что бы при нажатии на кнопку выполнилось следующее: window.open(‘<% url 'online_sc' %>‘, ‘_blank’) ?

Отслеживать
задан 17 янв 2017 в 10:42
579 1 1 золотой знак 11 11 серебряных знаков 27 27 бронзовых знаков
что значит запуск другого html-файла?
17 янв 2017 в 10:47

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

17 янв 2017 в 10:48

@Grundy — при нажатии на кнопку в браузере должна появляться новая вкладка с информацией из этого «другого html-файла»

17 янв 2017 в 10:59

@Grundy — на другой странице использовался вызов функции. Мне же не нужно создавать для одной строки отдельную функцию и ее вызывать. А как без использования функции я еще не знаю.

17 янв 2017 в 11:02

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

Как сделать кнопку в css с ссылкой + видео

Сегодня я записал для вас видеоурок, в котором показываю, как из обычной ссылки (тег A) сделать полноценную «кнопищу» при помощи CSS3.

Урок получился интересный, сугубо практический – воды 0%. Поэтому, он только для тех, кто любит что-то делать своими руками. Готового кода кнопки я не дам, а все покажу, как надо делать, в видео.

В нем мы будем разбирать:

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

Вот то, что у ВАС получится после урока

Но перед просмотром хочу сделать маленькую новость, потому как многие подписчики уже крутят в своих головах довольно таки милый вопрос:

Теперь по теме, урок в относительно «хорошем» качестве можно посмотреть онлайн через ютуб:

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

А еще можете скачать урок к себе на комп в отличном качестве (HD 1280х720).

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

Загрузка замка.

На этом все, надеюсь было интересно. Оставляйте свои впечатления и замечания в комментариях.

PS: Обратите внимание, что цвет кнопки вы можете указать свой, какой только захотите. Впрочем как и все остальное – отступы, размер, тень, градиент и так далее.

Пользуйтесь на здоровье!

Советую глянуть:

• Как разместить счетчик в подвале сайта (на примере шаблона D2)
• Видеокурс «Настройка редактора SublimeText 3 — верстай с душой!»
• Что такое php программирование?
• Редактируем фон, шапку, меню и подвал сайта.
• Создание клавиш клавиатуры в CSS (без графики)

/.wrap /.page_only—>
Комментариев: 30 RSS
Оставьте комментарий!
Комментариев: 30
Архип Риров | 12 мая 2012 в 18:32:17
А где такую форму рассказа в соцсетях взял?
Серёга | 13 мая 2012 в 14:23:37

Это пока тестируемая форма.

DEnis | 13 мая 2012 в 16:31:35
Помоги с сайтом !Плыззз)
vlad689 | 14 мая 2012 в 13:02:53

Серега, ты молодец! Скрипту без году неделя, а ты его уже используешь. По моему мнению, он здорово срабатывает. Так держать! vlad689

Серёга | 14 мая 2012 в 13:50:05

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

Антон Забашта | 15 мая 2012 в 15:06:41
А саму ссылку как вставить?
Серёга | 15 мая 2012 в 17:23:52

Антон, это и есть ссылка. Просто она выглядит как кнопка. описываешь в CSS внешний вид, а ссылке просто присобачиваешь класс, который в CSS описал, вот и все.

Антон Забашта | 15 мая 2012 в 18:51:55
Ну хорошо а как на сайт вставить?
Серёга | 15 мая 2012 в 21:21:44

Ну блин, Антон, это самые основы. Заводишь в стилях своего сайта класс, в котором описываешь внешний вид ссылки. Затем в коде этой ссылке присваиваешь класс.

class="имя класса"

Антон Забашта | 16 мая 2012 в 19:26:11
Все спасибо!
Сергей | 10 сентября 2012 в 11:42:34
Я герой. Но не качается урок-то!
Серёга | 10 сентября 2012 в 15:22:44

Какая ошибка?

Сергей | 12 сентября 2012 в 13:04:26

Вот теперь Аллес — нормалес ! Минуты не прошло. 15 метров скачал. А тогда зависало и не качалось. Спасибо ! Скажи Серж, а можно тебе прислать определенный скрипт или урок, с забугорного сайта, что бы ты в своих лучших традициях перевел и по полочкам «разобрал» его на понятном для нас (новичков) языке? Ведь порой читаешь, все делаешь как «доктор прописал». И ни хрена не работает. А мелочь. Лишняя подсказка, оказывается ключевой. А автор туториала не отвечает. Отмалчивается ! Ну и конечно » до свиданья » сайт ( блог ) со «стыбренным» материалом. В черный список.

Серёга | 12 сентября 2012 в 14:13:46

Если штука интересная — могу попробовать.

Татьяна | 28 ноября 2012 в 15:10:09

Серёг, подскажи плиз, если не замучала тебя. Кнопка вставилась, но появились 2 проблемы: 1. ссылка вылезла за границы сайта с правой стороны. Ну и вопрос, как её худее сделать? 2. я ей ставлю ссылку на страницу 8stepen.ru/contact, а она меня возвращает на текущую страницу 8stepen.ru/kontacty Вопрос номер 2, как её направить правильно? Просто хочется быстрей доделать сайт. Поможешь?

Татьяна | 28 ноября 2012 в 15:13:31

Также вы можете оставить онлайн заявку здесь: [html_base64]PGEgaHJlZj0iaHR0cDovLzhzdGVwZW4ucnUvY29udGFjdCI+CiA8IURPQ1RZUEUgSFRNTD4KPGh0bWw+CjxoZWFkPgo8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+Cjx0aXRsZT7QntC90LvQsNC50L0g0LfQsNGP0LLQutCwINCyINCb0LDQsdC+0YDQsNGC0L7RgNC40Lgg0LzQtdCx0LXQu9C4IDgg0YHRgtC10L/QtdC90Yw8L3RpdGxlPgo8L2hlYWQ+Cgo8Ym9keT4KPHN0eWxlPgogICAgYm9keXtiYWNrZ3JvdW5kOiNjY2M7IGZvbnQ6MTZweCBWZXJkYW5hLCBHZW5ldmEsIHNhbnMtc2VyaWY7fQogICAgCiAgICAubWFpbnt3aWR0aDozMDBweDsgdGV4dC1hbGlnbjpjZW50ZXI7IHBhZGRpbmc6NTBweDsgYmFja2dyb3VuZDojZmZmOyBtYXJnaW46NTBweCBhdXRvOyBib3JkZXItcmFkaXVzOiAxMHB4OyBib3gtc2hhZG93OjAgMCA0cHggIzY2Njt9CiAgICAKICAgIC5idXR0b257YmFja2dyb3VuZDojMDA5ZWNjOyBwYWRkaW5nOiAyMHB4O2JvcmRlci1yYWRpdXM6IDEwcHg7IGJveC1zaGFkb3c6MXB4IDFweCA1cHggIzU1NTsgYm9yZGVyOjFweCBzb2xpZCAjZmZmOyBjb2xvcjojZmZmOyB0ZXh0LWRlY29yYXRpb246bm9uZTsKICAgIGxldHRlci1zcGFjaW5nOjFweDsgdGV4dC10cmFuc2Zvcm06dXBwZXJjYXNlOyB0ZXh0LXNoYWRvdzogMXB4IDFweCAzcHggIzY2NjsgZm9udC13ZWlnaHQ6Ym9sZDt9CiAgICAKICAgIC5idXR0b246aG92ZXJ7YmFja2dyb3VuZDojODFiODFhO30KCiAgICAuYnV0dG9uOmFjdGl2ZXtiYWNrZ3JvdW5kOiM3MGE3MDk7IGJvcmRlci1jb2xvcjojNWE3MzExOyBib3gtc2hhZG92OiBpbnNldCAwIDAgNXB4ICM2NjY7fQo8L3N0eWxlPgogICAKICAgIDxkaXYgY2xhc3M9Im1haW4iPgogICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJidXR0b24iPtC+0L3Qu9Cw0LnQvSDQt9Cw0Y/QstC60LAg0LzQtdCx0LXQu9C4PC9hPgogICAgPC9kaXY+Cgo8L2JvZHk+CjwvaHRtbD4KPC9hPg==[/html_base64]

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

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

Внимание:
В коде я указываю « ВАША_ССЫЛКА_НА_СТРАНИЦУ » или « https://bloggood.ru/ ». Естественно, вам нужно заменить эти адреса своими.

HTML кнопка как ссылка

1 способ:
В атрибут « action » поместите URL-адрес, на который должна вести «кнопка»:

2 способ:
Также можно использовать HTML события:

3 способ:
Тоже взят из HTML события, только другим способом:

BlogGood() – это название функции вы можете назвать по своему.

HTML ссылка как кнопка

Теперь сделаем так, чтобы ссылка отображалась, как кнопка .

1 способ:
Самое простое решение – это нарисовать кнопку и обхватить ее тегами ссылки :

2 способ:

Можно использовать особое правило в CSS « -moz-appearance и -webkit-appearance » со значением « button » :

3 способ:

Вы можете в CSS прописать свои стили для кнопки.
Выглядеть это будет вот так:

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

Существует два подхода к созданию кнопки на сайте в виде ссылки. Рассмотрим подробно каждый из них.

1. Кнопка в виде изображения

Это самый простой подход к созданию кнопки в виде ссылки на сайте. Для этого Вам понадобится всего лишь найти подходящую картинку для кнопки. Например, картинка с Вашей кнопкой называется button.jpg . Тогда, для создания ссылки код должен быть следующим:

Вот во что он превращается на странице сайта:

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

Кстати, для создания изображений для кнопок есть специальный сайт: http://dabuttonfactory.com/. Здесь можно бесплатно создать кнопку по Вашему вкусу (задать стиль, выбрать изображение, написать подходящий текст и т.п.).

2. Кнопка с помощью HTML тега

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

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

Вместо URL1 и URL2 надо написать адреса страниц, куда необходимо осуществить переход. Если Вы хотите, чтобы ссылки открывались в новых вкладках (аналог атрибута target=»_blank» у тега a), то вместо onclick=»javascript:window.location=’. ‘» нужно прописать onclick=»javascript:window.open=’. ‘» (заменить location на open).

Я почти уверен, что Вам захочется оформить кнопку как-то по другому (под дизайн своего сайта). Для этого введем класс btn:

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

Мы разобрали 2 подхода к решению задачи создания кнопки на сайте. Обычно все используют первый подход, поскольку заморачиваться с input никто не хочет. Более подробно об стилях можно прочитать в статье: тег .

Как создать HTML-кнопку, которая будет вести себя, как гиперссылка?

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

Как мне этого добиться?

Сейчас я делаю так:

Проблема состоит в том, что в Safari и Internet Explorer в конце URL добавляется знак вопроса. Мне нужно сделать так, чтобы дополнительных символов в конец URL не было.

Есть два возможных решения данной проблемы: использование JavaScript и оформление гиперссылки в виде кнопки.

Но это, конечно же, требует JavaScript, и по этой причине не будет работать для программ чтения экрана.

Цель гиперссылки – перемещение на другую страницу. Поэтому попытка заставить кнопку действовать, как ссылка – неверное решение, то есть использовать гиперссылку и с помощью стилей сделать ее похожей на кнопку – не верно.

При необходимости, установите CSS-свойство display: inline; на форме, чтобы она двигалась вместе с окружающим текстом.

Верстка кнопок на сайте

Какие кнопки обычно встречаются на сайте? Я разделили бы их на два вида: кнопки внутри формы и кнопки-ссылки. И те и другие необходимо уметь верстать.

Кнопки внутри формы

Тег input

Вставляются тегом input, c типом submit – что означает кнопку для отправки формы.

Тег button

Вставляет на сайт кликабельную кнопку, работающую, в любом месте сайта.

Тег button по сравнению с input, располагает большими возможностями, внутри него можно вставлять любой контент (текст, изображения).

Но не надо забывать, что если при нажатии кнопки, должны отправиться данные на сервер, то теги input и button, следует поместить внутри тега form.

Теги input и button могут обрабатываться скриптом, например при событии клика.

Пример верстки кнопок внутри формы

Button

Input

Кнопки-ссылки

Практически на каждом сайте встречаются ссылки в виде тега a, но оформленные с помощью CSS, как кнопки. Чаще всего такие кнопки-ссылки, используются как элементы навигации на сайте: пункты меню, переход на следующую страницу, в рекламном блоке. Вот такие дизайнерские кнопочки не имеет смысла вставлять тегом button, лучше сразу вставлять тегом a с каким-нибудь классом или ID. Поскольку эта кнопка будет куда-то все равно ссылаться.

Пример верстки кнопки ссылки #1

Тег a по умолчанию является строчным элементом, если не задать ему display: inline-block, то к нему не применятся отступы, рамки и другие стили.

Скриншот

Пример верстки кнопки ссылки #2

Скриншот

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Похожие публикации:

1. Что значит теги в html
2. Что такое dom в html
3. Что такое span html
4. Что такое средство просмотра html

Ссылка как кнопка

Сделайте ссылку, которая при наведении на неё курсора мыши меняла свой вид, как показано на рис. 1. Вверху показана исходная ссылка, внизу ссылка после наведения курсора.

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные задачи

• TEX
• Отступы между блоков
• Андроид в тени
• Ссылка как кнопка
• Вложенные списки
• Форма регистрации
• Объединение ячеек таблицы
• Обязательные поля формы
• Цвет и фон в таблице
• Асуанская плотина
• Батарейка
• Заголовки

О сайте

Основные разделы

HTML

CSS

Сайт

© 2002–2023 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru