Как создать кнопку с изображением в кнопке

ProgramBox

Как создать кнопку с изображением в кнопке

Post author:admin
Запись опубликована:20 февраля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Как мне использовать изображение png в кнопке.

Это тип кнопки, которую я пытаюсь создать

 .btn {
  background-color: red;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}

 <button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>

1. если какой-либо орган поможет мне, как мы можем сделать этот тип, он очень благодарен. i.stack.imgur.com/4PJKh.jpg

2. Используете ли вы какие-либо фреймворки, такие как bootstrap или ionic, или что-то еще, или просто обычный html и css?

3. простой html и css

Ответ №1:

Вы можете использовать css с фоновым изображением

 <style>
  button { 
  background-image: url('https://via.placeholder.com/350x150'); 
  width: 350px;
  height: 150px;
} 
</style>

<button>button</button>

Ответ №2:

Если вы хотите светиться:

Измените <i> на изображение, если вам нужны собственные изображения

https://codepen.io/Stockin/pen/XPvpoB

 document.getElementById("container").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("fa")) { 
    const parentID = tgt.closest("a").dataset.id;
    console.log(parentID)
    document.getElementById(parentID).classList.toggle("hide");
  }
})

 body {
  margin: 0;
  padding: 0;
  background: #262626;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

ul li {
  list-style: none;
  margin: 0 15px;
}

ul li a {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  background: #171515;
  border-radius: 50%;
  font-size: 30px;
  color: #666;
  transition: .5s;
}

ul li a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #d35400;
  transition: .5s;
  transform: scale(.9);
  z-index: -1;
}

ul li a:hover:before {
  transform: scale(1.2);
  box-shadow: 0 0 15px #d35400;
  filter: blur(3px);
}

ul li a:hover {
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
}

.hide {
  display: none
}
.pop { position:absolute; width:100px; height:100px; background-color:yellow;}

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<div id="container">
  <div>
    <ul>
      <li><a href="#" data-id="arrows"><i class="fa fa-arrows" aria-hidden="true"></i></a></li>
      <li><a href="#" data-id="btc"><i class="fa fa-btc" aria-hidden="true"></i></a></li>
      <li><a href="#" data-id="globe"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
      <li><a href="#" data-id="home"><i class="fa fa-home" aria-hidden="true"></i></a></li>
      <li><a href="#" data-id="repeat"><i class="fa fa-repeat" aria-hidden="true"></i></a></li>
    </ul>
  </div>
  <div class="hide pop" id="arrows">Arrows</div>
  <div class="hide pop" id="btc">BTC</div>
</div>

Ответ №3:

для изображения вы можете применить его как bakground , как изображение <img> или через псевдо. текст может быть обычным текстом или также вводиться из псевдо. Это ваш выбор

Фон и псевдо можно использовать с помощью классов, поэтому его легко использовать повторно, но в разметке может отсутствовать ее значение, если вы получаете пустую кнопку

Фигуру можно нарисовать с помощью clip-path . ( вот инструмент, который поможет рисовать и знакомиться с ним: https://bennettfeely.com/clippy / )

Границы и тени фигур можно нарисовать с помощью filter (см. drop-shadow ), но требуется дополнительный уровень разметки, чтобы сделать каждую кнопку независимой. давайте использовать a <b></b> (если вам это не нужно для fa-icon)

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

 .btn b {
  display: inline-block;
  background-color: red;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  clip-path: polygon(0% 14%, 0% 100%, 87% 100%, 100% 88%, 100% 0%, 12% 0%);
}

.btn {
  border: none;
  background: none;
  filter: drop-shadow(2px 0 gray) drop-shadow(-2px 0 gray) drop-shadow(0 2px gray) drop-shadow(0 -2px gray);
}

.btn:hover {
  filter: drop-shadow(0 0 5px blue)
}
/* demo purpose */
.btn .btn b:before {
  content: url(https://picsum.photos/id/175/20/20);
  display: block;
  margin: auto;
}

.btn .btn b:after {
  content: "text";
}
body {
background:url(https://picsum.photos/id/185/300/200) 0 0 / cover ;
}

 <button class="btn">
  <b>amp;phone;<br>phone</b>
</button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>

Редактировать

вот пример javascript для отображения / скрытия изображения при нажатии

 var btns = document.querySelectorAll("button.btn")

for (let i = 0; i < btns.length; i  ) { 
  btns[i].addEventListener("click", () => {
  btns[i].classList.toggle("hide");
  })
  
}

 /* added */ .btn.hide b:before {opacity:0}
.btn b {
  display: inline-block;
  background-color: red;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  clip-path: polygon(0% 14%, 0% 100%, 87% 100%, 100% 88%, 100% 0%, 12% 0%);
}

.btn {
  border: none;
  background: none;
  filter: drop-shadow(2px 0 gray) drop-shadow(-2px 0 gray) drop-shadow(0 2px gray) drop-shadow(0 -2px gray); 
}

.btn:hover {
  filter: drop-shadow(0 0 5px blue)
}
 
/* demo purpose */
.btn b:before {
  content: url(https://picsum.photos/id/175/20/20);
  display: block;
  margin: auto; 
}

.btn b:after {
  content: "text";
}
body {
background:url(https://picsum.photos/id/185/300/200) 0 0 / cover ;
}

 <button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>

1. еще одна вещь, которую я хочу спросить, как сделать так, чтобы изображение png с кнопкой было открыто??

2. ?? кнопка поймает щелчок. Вы имеете в виду, что хотите щелкнуть только изображение? добавьте еще один фрагмент

3. я хочу, чтобы при нажатии на кнопку телефона новое изображение png отображалось с использованием javascript или чего-то еще??

4. : фокус может помочь в css, но он будет потерян, как только вы нажмете в другом месте. это нормально? обновлен второй фрагмент с помощью:focus, чтобы вы могли увидеть идею. если она должна оставаться после нажатия в другом месте, тогда потребуется js

5. Нет,, означает, что я хочу создать средство, когда я нажимаю на кнопку, тогда изображение отображается, а когда я нажимаю на кнопку, тогда изображение скрывается .. можешь мне помочь

Ответ №4:

Добавьте следующую строку в свой класс .btn. Замените ‘myimageurl’ на относительный путь к изображению

 .btn {
  background-image: url(./myimageurl);
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}

Ответ №5:

Как насчет этого: D?

 body{
background:url('https://img.freepik.com/free-photo/dark-blue-glow-dust-particle-abstract-background_35672-1414.jpg?size=626amp;ext=jpg');
background-size:100%;
padding:20%;
}
a:hover{
text-decoration:none;

}

button{
text-align:center;
padding:8px 18px 8px 18px;
color:white;
background:rgba(0,0,0,0.6);
border:2px solid silver;
border-radius: 15px 0px 15px 0px;
}

button b,button span{
font-family:arial;
  color:white;
}

button:hover{
  box-shadow:0px 0px 9px 3px #ffaa44;
}

button:hover b,button:hover span{
  color:#ffaa44;

}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<a href="https://img.freepik.com/free-photo/dark-blue-glow-dust-particle-abstract-background_35672-1414.jpg?size=626amp;ext=jpg" target="_blank">

  <button>
    <span class="glyphicon glyphicon-pencil"></span>
    <br>
    <b>edit</b>
  </button>
</a>

<a href="https://img.freepik.com/free-photo/dark-blue-glow-dust-particle-abstract-background_35672-1414.jpg?size=626amp;ext=jpg" target="_blank">

  <button>
    <span class="glyphicon glyphicon-pencil"></span>
    <br>
    <b>edit</b>
  </button>
</a>



<a href="https://img.freepik.com/free-photo/dark-blue-glow-dust-particle-abstract-background_35672-1414.jpg?size=626amp;ext=jpg" target="_blank">

  <button>
    <span class="glyphicon glyphicon-pencil"></span>
    <br>
    <b>edit</b>
  </button>
</a>


<a href="https://img.freepik.com/free-photo/dark-blue-glow-dust-particle-abstract-background_35672-1414.jpg?size=626amp;ext=jpg" target="_blank">

  <button>
    <span class="glyphicon glyphicon-pencil"></span>
    <br>
    <b>edit</b>
  </button>
</a>

1. M Хасан Нудин Спасибо

2. еще одна вещь, которую я хочу спросить, как заставить изображение png нажимать на кнопку, открыто

3. можете ли вы, пожалуйста, помочь мне

4. png открыть, что умеешь?

5. означает, что изображение файла png открывается, когда я нажимаю на кнопку

Ответ №6:

Вот решение от меня.

 .btn_container {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 200px);
    margin: auto;
}

.btn {
    width: 70px;
    height: 50px;
    background-image: url("https://s1.iconbird.com/ico/2013/9/452/w512h5121380477044settings.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    background-color: lightgray;
    border: 0;
    outline: 0;
    cursor: pointer;
    box-shadow: gray 1px 1px 0,
                gray 2px 2px 0,
                gray 3px 3px 0,
                gray 4px 4px 0,
                gray 5px 5px 0,
                gray 6px 6px 0,
                gray 7px 7px 0,
                gray 8px 8px 0;
}

.btn:hover {
    background-color: darkgray;
    background-blend-mode: color-dodge;
}

.btn:focus {
   background-image: url("https://7coffee.in.ua/wp-content/uploads/2013/09/iconmonstr-tools-icon.png.pagespeed.ce.nUaWWvjugS.png");
   filter: drop-shadow(0 0 10px yellow);
   box-shadow: darkgray 1px 1px 0,
               darkgray 2px 2px 0,
               darkgray 3px 3px 0,
               darkgray 4px 4px 0,
               darkgray 5px 5px 0,
               darkgray 6px 6px 0,
               darkgray 7px 7px 0,
               darkgray 8px 8px 0;
}

 <div class="btn_container">
  <button class="btn"></button>
  <button class="btn"></button>
  <button class="btn"></button>
  <button class="btn"></button>
  <button class="btn"></button>
</div>

1. еще одна вещь, которую я хочу спросить, как сделать так, чтобы при нажатии на кнопку изображение png было открыто??

2. как мы можем это сделать с помощью javascript

3. вы хотите загрузить новый значок в кнопку при нажатии?