Невидимая кнопка HTML CSS
Привет я пытаюсь сделать невидимую кнопку (все еще функциональную и кликабельную), потому что мои стили кнопок встроены в фон, и я не хочу их нарезать, и делать все это с самого начала.
поэтому я просто хочу сделать кнопку, поместить ее на часть фона, где должна быть кнопка, и сделать ее невидимой, чтобы изображение кнопки фона можно было увидеть и щелкнуть.
какие предложения? Большое спасибо!
5 ответов
вы должны использовать следующие свойства button элемент, чтобы сделать его прозрачным.
Прозрачная Кнопка Без Текста
button {
background: transparent;
border: none !important;
font-size:0;
}
Прозрачная Кнопка С Видимым Текстом
button {
background: transparent;
border: none !important;
}
и использовать absolute position для установки элемента.
у вас есть элемент кнопки под div. Использовать position: относительный на div и position: Абсолют на кнопке для того чтобы расположить его внутри div.
здесь работа JSFiddle
вот обновленный JSFiddle что отображает только текст с кнопки.
button {
background:transparent;
border:none;
outline:none;
display:block;
height:200px;
width:200px;
cursor:pointer;
}
укажите высоту и ширину относительно изображения в фоновом режиме.Это удаляет границы и цвет кнопки.Возможно, Вам также потребуется установить его абсолютным, чтобы вы могли правильно разместить его там, где вам нужно.Я не могу помочь вам дальше, не отправляя вам код
чтобы сделать его действительно невидимым, вы должны установить контур:нет; в противном случае в некоторых браузерах будет синий контур, и вы должны установить дисплей:блок если вам нужно щелкнуть его и установить размеры на него
вы можете использовать CSS, чтобы скрыть кнопку.
button {
visibility: hidden;
}
Если <button> это просто кликабельная область на изображении, зачем беспокоиться о том, чтобы сделать ее кнопкой? Вы можете использовать <map> элемент.