0

Как задать цвет картинки в кнопке? Не могу найти свойство каким это можно сделать.

Есть кнопка в которой есть картинка.

.button {
        background: url('../image/arrow.png') 189px no-repeat; /* картинка */
        background-color: #ff5c36; /* цвет кнопке*/
        color:  #ffffff; /* цвет текста в кнопке*/
        width: 100px;
    }
<input class="button" type="button" value="Send">
        

К сожалению не понял как добавить в код картинку.

0

1 ответ 1

1

В общем виде с текущими условиями вы не сможете поменять цвет вашей стрелки через CSS-свойства. Либо выносите вашу иконку в отдельное изображение и элемент/псевдоэлемент и пользуйтесь фильтрами, например так (инпутам нельзя добавлять псевдоэлементы, придется заменить на button):

button {
  position: relative;
  padding-right: 70px;
}

button:after {
  position: absolute;
  content: '';
  right: 10%;
  top: 10%;
  background-image: url(http://www.clker.com/cliparts/1/H/k/P/S/l/dezzit-right-bt-hi.png);
  background-size: 100% 100%;
  width:30px;
  height:14px;
}

.huerotate:after {
  filter: hue-rotate(45deg);
}
<button>неповторимый оригинал</button>
<button class="huerotate">изменённая пародия</button>

Или воспользоваться SVG или иконочным шрифтом и вставить вашу стрелку внутрь кнопки и стилизовать через CSS:

button {
  position: relative;
  padding-right: 50px;
}

button svg {
  fill:none;
  stroke: red;
  position: absolute;
  right: 10%;
  top: 15%;
}
<button>
click me
<svg width=20 height=10>
  <polyline points="15,0 20,5 15,10"></polyline>
  <polyline points="0,5 20,5"></polyline>
</svg>
</button>

1
  • большое вам спасибо
    – Dima
    23 фев 2017 в 10:49

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.