Кнопка ссылка css: ссылки или кнопки — Блог HTML Academy

Leave a Comment / Css / By /

javascript — HTML ссылка-картинка, прямо на ней еще и кнопка. Как сделать чтобы при нажатии на кнопку не срабатывала ссылка?

Задать вопрос

Вопрос задан

Изменён 1 год 1 месяц назад

Просмотрен 646 раз

Есть такой код:

<a href="https://sample.photohost/398821.jpg">
  <img src="https://sample.photohost/398821.jpg">
  <button type="button"> Copy link </button>
</a>

CSS’ом кнопка поставлена поверх картинки.

При нажатии на кнопку срабатывает кнопка и еще и открывается картинка.

Как сделать чтобы картинка открывалась по картинке, а по кнопке не открывалась?

  • javascript
  • html
  • css

1 

. wrap {
 width: 200px;
  height: 200px;
  position: relative;
  z-index: 1;
}
a{
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
a img{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
button {
  position: absolute;
  bottom: 50px;
  z-index: 1;
  left: 0;
  right: 0;
  margin: auto;
  width: 80px
}
<div>
  <a href="https://sample.photohost/398821.jpg">
      <img src="https://sample.photohost/398821.jpg">
  </a>
  <button type="button"> Copy link </button>
</div>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Настройка соц.

кнопок

База знаний

Кнопки на социальные сети

Чтобы добавить ссылки на свои страницы в социальных сетях можно использовать виджет «Кнопка-картинка» указав в нем ссылку и загрузив картинку.

Например, мы хотим добавить ссылки на социальные сети Facebook, Instagram, ВКонтакте. Данные кнопки мы разместим в меню сайта вместо email-адреса. Всего для этого есть два варианта действий.

Вариант 1

1. Для создания меню сайта используйте инструкцию «Сделать меню с нуля или воспользоваться готовыми вариантами».

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

3. Загрузим в кнопки картинки и немного изменим параметры отображения кнопок.

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

Вариант 2

1. Выполняем аналогичные действия из первого и второго шага предыдущего варианта, но вместо колонков и кнопок добавим виджет «Кнопки на социальные сети»;

2. Удалим социальную сеть «Twitter» из виджета, вместо него добавим Instagram, укажем ссылки на соц. сети, поменял кнопки местами и укажем выравнивание с правой стороны.

Кнопки «Поделиться»

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

Чтобы в записи на стене социальной сети отображался свой заголовок, описание и картинка, нужно ввести эти данные в настройках страницы, на вкладке «Социальные сети».

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

Альтернативный вариант настройки кнопок «Поделиться»

В интернете есть различные сервисы для создания кнопок «Поделиться». Парой из них мы и воспользуемся. Этот вариант более сложный, так как здесь требуется базовое понимание работы CSS, HTML и JavaScript.

Кнопки «Поделиться» из сервиса pluso.ru

1. Выберем кнопки, который нам нужны, на Facebook, Вконтакте и Google+, прочие кнопки удалим.

2. Ниже можно подобрать параметры отображения кнопок.

3. Ещё ниже есть поля для ввода заголовка и краткого описания страницы. Эти поля мы не будем заполнять, так как эти данные уже введены в настройках страницы, раздел «Социальные сети».

4. После настройки нужно скопировать сгенерированный код кнопок и вставить его в виджет «Вставка HTML кода», а затем опубликовать страницу или выполнить предпросмотр для просмотра результатов отображения.

5. Кнопки «Поделиться» от сервиса pluso.ru отображаются по левой стороне. Выровнять их можно добавив соответствующее CSS свойство, но если обойтись более простым вариантом, то задать определенное расположение элементу можно используя виджет «Колонки».

Кнопки «Поделиться» из сервиса usocial.pro

1. Прежде чем подобрать параметры для кнопок в этом сервисе, следует авторизоваться через одну из представленных соц. сетей, иначе выбранные настройки для кнопок «Поделиться» могут не сохраниться.

2. В личном кабинете нажмем на кнопку «Создать набор», выберем «Кнопки «Поделиться»» и настроим параметры отображения кнопок.

3. Полученный на сервисе код добавляем в виджет «Вставка HTML кода» и выполняем предпросмотр или публикацию для просмотра результата отображения.

Чтобы просмотреть, как выглядят и работают кнопки на опубликованной странице перейдите по этой ссылке.

Кнопки W3.CSS

❮ Назад Следующий ❯

+ + +

Классы кнопок W3.CSS

W3.CSS предоставляет следующие классы для кнопок:

Класс Определяет
w3-btn Прямоугольная кнопка с эффектом наведения тени.
Цвет по умолчанию — черный.
w3-кнопка Прямоугольная кнопка с серым эффектом наведения.
Цвет по умолчанию светло-серый в W3.CSS версии 3.
Цвет по умолчанию унаследован от родительского элемента в версии 4.
w3-бар Горизонтальная полоса, которую можно использовать для группировки кнопок.
(идеально подходит для меню горизонтальной навигации)
w3-блок Класс, который можно использовать для определения кнопки полной ширины (100%).
w3-круг Может использоваться для определения круглой кнопки.
w3-рябь Может использоваться для создания волнистого эффекта.

Кнопки

Класс w3-button и w3-btn класс добавляет поведение кнопки к любым элементам HTML.

Наиболее часто используемые элементы: ,
w3schools.com»>Кнопка ссылки

< тип ввода = "кнопка" значение = "Кнопка ввода">

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

Попробуйте сами »

Цвета кнопок

Все классы w3- color используются для добавления цвета кнопкам:


Попробуйте сами »

Цвета при наведении

Эффекты при наведении также доступны во всех цветах. Вот некоторые из них:

Классы w3-hover- color используются для добавления цвет при наведении на кнопки:

Пример



Попробуй сам »

Формы пуговиц

Модель w3-round- размер классы используются для добавления округленных границы кнопок:

Пример








Попробуйте сами »

Размеры кнопок

Классы w3- size могут использоваться для определения различных размеров текста: Medium





Попробуй сам »

Границы кнопок

Класс w3-border можно использовать для добавления границ к кнопкам.

Классы w3-border- color используются для определения цвета границы:

Попробуй сам »

Совет: Добавьте класс w3-round- size , чтобы добавить закругленные границы. Кнопки с различными текстовыми эффектами Широкая

Попробуй сам »

Кнопки могут иметь эффекты курсива и полужирного текста:

Используйте стандартные теги HTML ( и ), чтобы добавить эффект курсива или жирного шрифта к текст кнопки:

Пример



Попробуй сам »

Кнопки с отступами

Классы w3-padding-

size используются для добавления дополнительных отступ вокруг текста кнопки:

Пример





Попробуй сам »

Кнопки полной ширины

Чтобы создать кнопку полной ширины, добавьте к кнопке класс w3-block .

Кнопки полной ширины имеют ширину 100 % и охватывают всю ширину родительского элемента:

Пример





Попробуй сам »

Совет:

Выровняйте текст кнопки с w3-left-align class или класс w3-right-align .

Размер блока можно определить с помощью style=»width:» .

Пример

<кнопка >Кнопка


Попробуй сам »

Кнопки отключены

Кнопки выделяются эффектом тени, а курсор при наведении на них превращается в руку.

Отключенные кнопки непрозрачны (полупрозрачны) и отображают знак «парковка запрещена»:

Класс w3-disabled используется для создания отключенной кнопки (если элемент поддерживает стандартный атрибут HTML disabled, вы можете использовать отключенный атрибут вместо этого):

Пример

w3schools.com»>Кнопка ссылки


< a href="https://www.w3schools.com">Кнопка ссылки


Попробуй сам »

Панели кнопок

Кнопки можно группировать на горизонтальной панели с помощью w3-bar class:

Пример


 
 
 

Попробуй сам »

Класс w3-bar был представлен в W3.CSS версии 2.93/2.94.

Кнопки можно сгруппировать без пробела между ними с помощью w3-bar-item class:

Пример


 
 
 

Попробуй сам »

Панели кнопок можно центрировать с помощью класса w3-center :

Пример



 
 
 

Попробуй сам »

Чтобы отобразить две (или более) панели кнопок на одной строке, добавьте w3-show-inline-block класс:

Пример



 
 
 


<дел class="w3-bar">
 
 
 


Попробуй сам »

Панели навигации

Панели кнопок можно легко использовать в качестве панелей навигации: Кнопка

Попробуй сам »

Размер каждого элемента можно определить с помощью style=»width:» :

Пример

<дел class="w3-bar">


  <кнопка style="width:33. 3%»>Кнопка
 
 

Попробуй сам »

Далее в этом руководстве вы узнаете больше о навигации.

Левая и правая кнопки

Используйте класс .w3-left и .w3-right класс для плавающих кнопок влево или вправо:

Используется для создания кнопок «предыдущий/следующий»:

Пример


 
 

Попробуй сам »

Кнопки с волновым эффектом

Класс w3-ripple создает волновой эффект на кнопках (при нажатии на них):

Пример


<кнопка class="w3-button w3-ripple w3-red">Кнопка

Попробуй сам »

Все элементы могут быть кнопками

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

Изображение может быть кнопкой w3

Изображение может быть кнопкой w3

Любой элемент div, заголовок, нижний колонтитул или другие контейнеры могут быть w3-button !

Любой элемент div, заголовок, нижний колонтитул или другие контейнеры могут быть w3-btn !

Круглые кнопки

Класс w3-circle можно использовать для создания круглых кнопок:

+ +

Пример



Попробуй сам »

Квадратные кнопки:

+ +

Пример

<кнопка>+
<кнопка class="w3-button w3-teal">+

Попробуй сам »

❮ Предыдущий Далее ❯


Сделать командную кнопку похожей на ссылку? — HTML и CSS — Форумы SitePoint

UpstateLeafPeeper

#1

Здравствуйте. Я работаю над корзиной для покупок, в которой люди должны иметь возможность обновлять и удалять элементы в своей корзине.

Я стараюсь не использовать кнопки для этих функций из-за нехватки места.

Есть ли способ использовать CSS для стилизации командной кнопки формы, чтобы она выглядела как простая гиперссылка HTML?

В идеале примерно так…

 Обновить | Удалить

Вчера @DaveMaxwell показал мне довольно изящный трюк, чтобы кнопка выбора формы (переключатель) выглядела как квадратная кнопка, поэтому мне интересно, можно ли сделать что-то подобное здесь?

головка

#2

Привет, UpstateLeafPeeperr,

просто удалите то, что делает их похожими на кнопки…

HTML:- 

  |

CSS:- 

_coothead_
ввод[тип=кнопка],
кнопка {
     граница: 0;
     цвет фона: прозрачный;
     размер шрифта: 1em;
 }

1 Нравится

UpstateLeafPeeper

#3

@coothead,

Я не понимаю, почему у вас есть тег и тег