Как заменить кнопку на картинку любой формы?

Рейтинг: 1Ответов: 1Опубликовано: 22.12.2014

Нужно на кнопку назначить картинку свою, делаю так:

Html 

<button class="button">Кнопка</button>

Css: 

.button{
    background: url('../images/red/top.png'); 
}

Но кнопка получается стандартной формы, и картинка в ней просто размножается, и надпись "Кнопка" видна, если надпись убираю, то она становится очень маленькой, и картинки нет. А мне надо, чтобы кнопка была той формы, какой я сделаю картинку, и надпись мне не надо, написать я хочу на самой картинке. Как мне это сделать?

css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Например так:

button 
{
    background: url(../img/button_img.png) 50% 50% no-repeat;
    background-size: contain;
    width: 100px;
    height: 50px;
}

Если я правильно понял, что вам нужно... Размеры ширины и высоты указывайте любые.