Кнопка с картинкой. Как добавить на кнопку свою картинку, фотографию?

Question

Всем привет. Хочу добавить картинку на кнопку. Надеюсь на вашу помощь.

Answer 1

.ico {
  background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=32&d=identicon&r=PG);
  width: 32px;
  height: 32px;
  display: inline-block;
}

button {
  padding: 3px;
}

button span {
  display: inline-block;
  vertical-align: middle;
}

<button>
  <span class=ico></span>
  <span>And some text</span>
</button>

Работает в Chrome, FF, IE (проверено в 11) и Opera 12

Answer 2

Если не принципиально, чтобы был именно тег button, можно использовать input[type="image"] и через src просто вставить любую картинку:

[type="image"] {
  width: 100px;
  transition: .3s;
}
[type="image"]:hover {
  opacity: .8;
}

<input type="image" role="button" src="https://cdn.pixabay.com/photo/2013/07/13/13/13/button-160595_640.png">

БЛОГ НА HUSL

Кнопка с картинкой. Как добавить на кнопку свою картинку, фотографию?

Ответы (2 шт):