border gradient

[Cherous]

Аллоха, люди!

 

Есть 3 состояния кнопки, у каждой из которых border и background градиент. 

Собственно, как это чудо можно реализовать придерживаясь следующих требований:

• вся магия должна происходить исключительно на стороне css.
• в html не должно быть вложенности.
• стили должны одинаково корректно применяться к любым html тегам.
• можно использовать любые свойства css3, главное что бы в не поддерживаемых браузерах срабатывала заглушка типа сплошного цвета вместо градиента.

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

 

Спасибо.

[Great Rash]

http://codepen.io/GreatRash/pen/FJloK

[Cherous]

http://codepen.io/GreatRash/pen/FJloK

 

Спасибо, но псевдоэлементы не работают с input.

 

P.S. забыл еще упомянуть, что об использовании картинок и речи не может быть  

[Great Rash]

А зачем вам input? <button> успешно заменяет собой <input type="button"> или <input type="submit">.

Хотя... я тут пораскинул мозгами - http://codepen.io/GreatRash/pen/InvdL

[Cherous]

Действительно это решение. Использование псевдоэлементов не новинка для меня, а вот разница между <input type="button"> и <buttom/> существенная тонкость о которой я не знал. Огромное человеческое спасибо, к моему удивлению вы достойны своего звания, но статус над аватаркой какой-то не характерный для носителя подобной информации  

[Great Rash]

Это шутка юмора такая в статусе. Не мной придуманная. Решил оставить: провожают ведь всё равно по уму

[CroaToa]

но статус над аватаркой какой-то не характерный для носителя подобной информации

  

[Cherous]

http://codepen.io/GreatRash/pen/FJloK

 

К моему удивлению <button> не работает в IE10, но армия градиентов через запятую в связке с областью позиционирования вполне подходящий вариант даже для input[type=button]. 

 

Еще раз спасибо за решение. Я удовлетворен результатом.

Edited May 28, 2014 by Cherous

[Great Rash]

К моему удивлению <button> не работает в IE10

Если вы хотите сабмитить форму, то надо так писать: <button type="submit">, тогда заработает вообще везде, даже в ИЕ7.

[Cherous]

 

К моему удивлению <button> не работает в IE10

Если вы хотите сабмитить форму, то надо так писать: <button type="submit">, тогда заработает вообще везде, даже в ИЕ7.

 

 

нэ нэ нэ... дело не в сабмите формы. Для button не работает градиент на обводке в IE.

[CroaToa]

Для button не работает градиент на обводке в IE.

 

http://stackoverflow.com/questions/18318239/how-do-i-fix-this-gradient-for-ie-9-and-10