Сегодня потихоньку исчезает мода на графику. Но все же по-прежнему может быть необходимость знать, как делается в css кнопка картинка? И сегодня я вам расскажу, как такую сделать.
Покажу я на примере формы подписки. Но для начала само изображение кнопки. Я выбрал вот такую милую иконочку:
А вот так она выглядит непосредственно в форме подписки, пусть и самой простой:
При нажатии на эту кнопку произойдет отправка формы. Так как ее сделать? Очень просто, вот весь код формы:
<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;
Ну а саму кликабельность кнопке вы можете придать с помощью javascript и jquery. Все зависит от того, какие действия она должна выполнять. Если вы понимаете все это, то поймете и то, что кнопку создать создать абсолютно любую.
Так что тут я даже не вижу смысла приводить какие-то примеры, потому что все очевидно. Кстати, подробнее о том, как делать ссылку-картинку я писал здесь.