Блог

Главная - Вопросы по программированию - Как добавить элемент к кнопке при наведении

Как добавить элемент к кнопке при наведении

#html #css #hover

Вопрос:

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

кнопка изображения

Ответ №1:

Вот как это сделать:

 .btncontain {
  position: relative;
  width: 200px;
  height: 100px;
}

.button {
  border: 3px solid aqua;
  border-radius: 10%;
  width: 100px;
  margin: 20px;
  padding: 10px;
}

.button:hover{
  background-color: aqua;
color: white;
}

.button:before {
  content: "Normal";
}

.button:hover:before {
  content: "On Hover";
}

.btncenter {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.bubble {
  width: 30px;
  display: none;
  z-index: -1;
}

.button:hover .bubble{
  display: block;
}

.bubbletop{  
  position: absolute;
  top: 25%;
  left: 85%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.bubblebottom{
  position: absolute;
  top: 75%;
  left: 15%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
} 
 <div class="btncontain">

 <div class="btncenter">
  <button class="button">   <img class="bubble bubbletop"src="https://cdn130.picsart.com/262368078025212.png?r1024x1024">
   <img class="bubble bubblebottom"src="https://cdn130.picsart.com/262368078025212.png?r1024x1024"></button>
</div>
</div>

Комментарии:

1. Огромное спасибо.. я постараюсь это сделать.

Метки: