Войти
Регистрация

Кнопка отправки формы в виде картинки

Кнопка отправки формы в виде картинки

Иногда, когда дизайнер создает дизайн сайта, в котором есть формы, добавляет различные элементы дизайна, которые нужно воспроизвести с помощью HTML и CSS.

В нашем случае дизайнер в форме задал кнопку отправки формы в виде картинки.

В этой статье мы с Вами создадим форму и в качестве кнопки укажем вот эту картинку:

Напишем HTML-код формы и в качестве кнопки укажем тег <input> со значением image у атрибута type, а также у кнопки укажем атрибут src, в котором укажем путь к изображению кнопки:

<form action="" method="POST" />
   <label>Ваше имя:</label>
   <input type="text" name="name" />
   <label>Телефон:</label>
   <input type="text" name="phone" />
   <input type="image" src="button.png" />
</form>

Результатом этого кода будет работающая форма с кнопкой в виде картинки:






Выбирайте картинку небольших размеров, либо меняйте размер с помощью CSS:

input[type="image"] {
   width: 200px;
}

Это самый простой способ сделать кнопку в виде изображения.

Есть второй способ, когда в качестве кнопки используется тег <button>, в свойствах CSS для кнопки задается ширина и высота, в качестве фона устанавливается изображение и убираются границы кнопки:

button {
   background: url('button.img') no-repeat center center;
   background-size: contain;
   border: none;
   height: 50px;
   width: 200px;
}

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

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?