Ссылка с треугольником справа

[PavelTkachev]

Мне нужно сделать ссылку, чтобы справа у неё был треугольник. Я этого добился:

<a href="#">Вход</a>

        a{            cursor:pointer;            padding:0 20px;            font-size:20px;            border-radius:10px 0 0 10px;            width:100px;            background:#009944;            border:0;            height:30px;            line-height:30px;            display:inline-block;            text-align:center;            color:#fff;            position: relative;            text-decoration:none;        }        a:hover{            background:#ebb453;        }        a::after{            content:'';            position:absolute;            right:-30px;            bottom:0;            border:15px solid transparent;            border-left:15px solid #009944;        }

Однако при наведении мышью цвет треугольника остаётся неизменным, тогда как остальная часть ссылки меняет цвет. Как добиться того, чтобы и треугольник менял цвет?

 

[satantx]

a:hover::after{
            border-left:15px solid #ebb453;
        }

[PavelTkachev]

В IE между треугольником и ссылкой разрыв в 1 пиксел. Это как-то лечится?

[Николя223]

самое простое - условными комментариями

[PavelTkachev]

Дело в том, что если я подвину треугольник на пиксел левее, то во всех браузерах будет одно и то же - то есть - ступенька в один пиксел.

 

И ещё вопрос. Можно ли то же самоей (с треугольником справа) сделать с помощью css для кнопки submit? ::after для него не работает. Я сделал дополнительный span, но он не меняет цвет при наведении мышки на submit, та и при клике не срабатывает.

[afdw]

Дело в том, что если я подвину треугольник на пиксел левее, то во всех браузерах будет одно и то же - то есть - ступенька в один пиксел.

 

Так вам же пишут:

 

самое простое - условными комментариями

<!--[if IE 7]>  <style>    /* Сдвиг влево для браузера IE7 */  </style><![endif]-->

Подробнее.

Edited June 23, 2015 by afdw

[PavelTkachev]

Вы меня не поняли. Я знаю, что такое условные комментарии. IE не прорисовывает крайние левые пикселы. Но как я понял, единственное что можно сделать - это увеличить треугольник и подвинуть его влево для случая с IE.

 

 

А для кнопки submit что-то можно придумать?

[PavelTkachev]

Или единственный способ - это делат картинку для background?