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