Как доработать кнопку в форме?

Question

[Denis338]

На сайте kosmos58.ru почти в самом верху сайта есть кнопка(она картинка) заказать(синяя) при нажатии на нее происходит обводка как ее убрать?
И как сделать чтобы при нажатии на нее она менялась на другую картинку?
Просто для себя хотел узнать почему при нажатии она как бы дергается и можно как-нибудь это изменить?

Answer 1

[tennalian]

у вас кнопка - инпут, на инпутах стоит обводка при фокусе по ходу, вот она и выделяется) выделите текстовые инпуты в стилях [type='text']

Вообще грех делать такую кнопку картинкой, сделайте css стилями. И дергается она из-за появляющейся рамки в 1px видимо

Comments

[Denis338]

как исправить напишите пожалуйста

[tennalian]

input[type="text"]:focus{
border: 1px solid #69cee4;
box-shadow: 0px 1px 15px 0px rgba(105, 206, 228, 0.9);
}
либо input[type="submit"]:focus {border: 0; box-shadow: none;}

[Denis338]

Спасибо все получилось!! А насчет как заменить картинку при нажатии

[tennalian]

Denis338: Вообще, совет, не используйте столько картиной, от этого сайт тормозит и грузится фигово. Фон body можно обрезать и зарепитить, у враппера фон вообще стилями рисовать. Просто представьте, что кто-то добавить туда лишнего текста, у вас же поедет все.

[tennalian]

Denis338: сделайте кнопку через css, ну е-мое. background: blue; border-radius 30px; Чтобы текст добавить пропишите в инпуте value="Заказать". И при ховере меняйте цвет бекграунда. Такие вещи не делают картинками.

[Denis338]

Спасибо

[Ilya Korablev]

tennalian: без кавычек пишется type=submit вообще то.

[tennalian]

Ilya Korablev: не соглашусь www.w3.org/wiki/HTML/Elements/input/submit =)

[Ilya Korablev]

tennalian: я про CSS

[tennalian]

Ilya Korablev: ааа, в этом плане. Оба варианта верны и рабочие

Answer 2

[Александр Миранович]

Как выше написали делай лучше через css, такие кнопки никто уже не делает картинками давно, это плохой тон верстки, но если захочешь вместо стилей сможешь прописать картинки.
jsfiddle.net/2ovfz9jk/9