Оформление input[type="submit"]

[alejandro13]

Приветствую всех участников форума!

Подскажите, пожалуйста, как оформить кнопку отправки формы:

http://prntscr.com/9aybj3

 

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

[lexxcode]

Фон градиенты и тени помогут создать, текст - это текст, стрелку псевдоэлементом с иконкой стрелки и бордером слева.

Ну и лучше использовать button вместо input:submit

[My}I{uK]

Фон градиенты и тени помогут создать, текст - это текст, стрелку псевдоэлементом с иконкой стрелки и бордером слева.

Ну и лучше использовать button вместо input:submit

А скажите пожалуйста, мил человек, какой это именно псевдоэлемент должен быть?

[alejandro13]

Фон градиенты и тени помогут создать, текст - это текст, стрелку псевдоэлементом с иконкой стрелки и бордером слева.

Ну и лучше использовать button вместо input:submit

Я о тэге button не подумал) Ведь на input псевдоэлемент не повесишь.

Правда есть одно НО - этот бордер на кнопке прозрачный - через него видно фон страницы. Но можно допустить, что бордер все же белый)

[lexxcode]

А скажите пожалуйста, мил человек, какой это именно псевдоэлемент должен быть?

Я бы :after использовал, в данном случае

 

Правда есть одно НО - этот бордер на кнопке прозрачный - через него видно фон страницы. Но можно допустить, что бордер все же белый)

Ну можно и так, псевдо-элемент можно через position:absolute; вывести за границу кнопки и отступить на 1px, а кнопке задать position: relative; 

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

[alejandro13]

 

А скажите пожалуйста, мил человек, какой это именно псевдоэлемент должен быть?

Я бы :after использовал, в данном случае

 

 

 

Правда есть одно НО - этот бордер на кнопке прозрачный - через него видно фон страницы. Но можно допустить, что бордер все же белый)

Ну можно и так, псевдо-элемент можно через position:absolute; вывести за границу кнопки и отступить на 1px, а кнопке задать position: relative; 

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

 

 

А скажите пожалуйста, мил человек, какой это именно псевдоэлемент должен быть?

Я бы :after использовал, в данном случае

 

 

 

Правда есть одно НО - этот бордер на кнопке прозрачный - через него видно фон страницы. Но можно допустить, что бордер все же белый)

Ну можно и так, псевдо-элемент можно через position:absolute; вывести за границу кнопки и отступить на 1px, а кнопке задать position: relative; 

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

 

Спасибо, я разобрался. Делал изначально в принципе, то что ты и посоветовал, просто пытался повесить псевдоэлемент на инпут)