@Mavran

Как создать кнопку с картинкой?

Ребята есть кнопка, и задний фон кнопки оранжевый и надо сделать так чтобы рядом с кнопкой была картинка "+" но что-то у меня не получается и так и сяк пробовал. Искал в интернете не нашел подходящих вариантов!
jsfiddle.net/au5umnjo
6feb5f9deb04.png
PS Прошу прощения за очень легкий вопрос.
  • Вопрос задан
  • 11022 просмотра
Пригласить эксперта
Ответы на вопрос 5
mahabatuly
@mahabatuly
Frontend-бағдарламашы
.button-class:after {
   content: ' ';  //  Сюда мнемонику плюс можно поставить если хочешь
   position: absolute ; // У кнопки position : relative ; нужно поставить
   top: 50%;
   left: 10px;
   bottom: auto;
   right: auto;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   background: url('../img/plus.png') no-repeat ; 
   width: 10px;
   height: 10px;
Ответ написан
Комментировать
@IceJOKER
Web/Android developer
jsfiddle.net/au5umnjo/1 ??
Сложно просто плюсик поставить перед ADD A BOOK ?
А если нужно шрифт увеличить, то просто соедините два блока, один как левый с плюсиком и второй рядом с текстом и изменяйте размеры.
и вроде можно без фона обойтись, думаю с монотонным цветом справится background-color: #......;
Ответ написан
ProgramCodePav
@ProgramCodePav
Front-end developer. Love open source
кнопка? Пусть кнопкой будет блок div, в котором картинка img и текст. Сделайте стилизацию float: left; display: inline. И просто вешайте onclick событие
Ответ написан
seoperin
@seoperin
Full stack web developer. Laravel / Vue
Варианты:
1) background-image
2) fontawesome.io или другой иконочный шрифт
3) img + float:left (вариаций много)
4) Одной картинкой
......
Ответ написан
Комментировать
@InSource
Как вариант jsfiddle.net/au5umnjo/12 ( замечу, т.к. иконки в общем случае могут отличаться от данной - размером 13х13 - имеет смысл добавить ещё background-size: Npx; ).
Или можно подсмотреть в Bootstrap реализацию (см. под иконками getbootstrap.com/2.3.2/base-css.html#icons)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы