Как делается в css кнопка картинка?

Сегодня потихоньку исчезает мода на графику. Но все же по-прежнему может быть необходимость знать, как делается в css кнопка картинка? И сегодня я вам расскажу, как такую сделать.

Покажу я на примере формы подписки. Но для начала само изображение кнопки. Я выбрал вот такую милую иконочку:
arrow-right1
А вот так она выглядит непосредственно в форме подписки, пусть и самой простой:
форма подписки + кнопка картинка

При нажатии на эту кнопку произойдет отправка формы. Так как ее сделать? Очень просто, вот весь код формы:

<input type = "text" placeholder = "Введите свой e-mail">
<input type = "image" src = "arrow-right1.png">

Конечно, по-хорошему, чтобы все работало, эти поля нужно обернуть в форму, а самой форме задать обязательные атрибуты action и method. Но мы сейчас не о программировании и отправке данных на сервер, а о том, как сделать кнопку картинку.

Как видите из этого кода, это делается с помощью атрибута type = "image". При этом такая кнопка выполняет такую же функцию, что и type = "submit" — отправляет данные формы на сервер. Вторым атрибутом выступает src — путь к картинке, которая и будет нашей кнопкой.

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

input[type=image]{
	vertical-align: middle;
}

Будет работать только при выравнивании относительно одной строчки. Отлично, мы разобрались, как сделать кнопку картинку отправки формы. Но, что, если при нажатии на картинку должно происходить что-то другое? Для таких целей стоит воспользоваться другим методом, о котором я сейчас расскажу.

Создаем кнопки для любых целей, любого оформления!

По сути, практически любой парный тег годится для того, чтобы стать кнопкой. Почему? Потому что внутрь вы можете вложить картинку (или задать ее через фон), а чтобы при наведении на картинку курсор менялся на ладошку, есть css-свойство:
cursor: pointer;

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.

Ну а саму кликабельность кнопке вы можете придать с помощью javascript и jquery. Все зависит от того, какие действия она должна выполнять. Если вы понимаете все это, то поймете и то, что кнопку создать создать абсолютно любую.

Так что тут я даже не вижу смысла приводить какие-то примеры, потому что все очевидно. Кстати, подробнее о том, как делать ссылку-картинку я писал здесь.

Добавить комментарий