Як робиться в css кнопка картинка 3 способу
Сьогодні потихеньку зникає мода на графіку. Але все ж як і раніше може бути необхідність знати, як робиться в css кнопка картинка? І сьогодні я вам розповім, як таку зробити.
Покажу я на прикладі форми підписки. Але для початку саме зображення кнопки. Я вибрав ось таку милу іконочку:
А ось так вона виглядає безпосередньо в формі підписки, нехай і найпростішою:
- Reg.ru - тут реєструю і продовжую доменні імена, дуже надійна компанія!
- HostIQ - хостинг преміум якості.
- Ihor - більш бюджетний, але теж дуже якісний хостинг-провайдер.
- Telderi.ru - єдина надійна біржа в рунеті, на якій можна купити готові сайти з доходом!
При натисканні на цю кнопку відбудеться відправка форми. Так як її зробити? Дуже просто, ось весь код форми:
Звичайно, по-хорошому, щоб все працювало, ці поля потрібно обернути в форму, а самій формі задати обов'язкові атрибути action і method. Але ми зараз не про програмування і відправці даних на сервер, а про те, як зробити кнопку картинку.
Як бачите з цього коду, це робиться за допомогою атрибута type = "image". При цьому така кнопка виконує таку ж функцію, що і type = "submit" - відправляє дані форми на сервер. Другим атрибутом виступає src - шлях до картинки, яка і буде нашою кнопкою.
Відмінно. До речі, у мене поле для введення тексту і кнопка з картинкою розташовуються рівно на одному рівні і все виглядає добре, але за замовчуванням може бути не так. Якщо вам потрібно вирівняти кнопку щодо текстового поля, то використовуйте прийом з вертикальним вирівнюванням.
input [type = image] vertical-align: middle;
>
Працюватиме тільки при вирівнюванні щодо одного рядка. Відмінно, ми розібралися, як зробити кнопку картинку відправки форми. Але, що, якщо при натисканні на картинку повинно відбуватися щось інше? Для таких цілей варто скористатися іншим методом, про який я зараз розповім.
Створюємо кнопки для будь-яких цілей, будь-якого оформлення!
По суті, практично будь-який парний тег годиться для того, щоб стати кнопкою. Чому? Тому що всередину ви можете вкласти картинку (або задати її через фон), а щоб при наведенні на картинку курсор змінювався на долоньку, є css-властивість:
cursor: pointer;