CSS3：在悬停时更改按钮的形状

Question

我创建了一个按钮：

http://jsfiddle.net/fy2zG/#&togetherjs=xaJ1VA8PBN

到目前为止我的css是：

.button {
    padding: 5px 20px;
    background: orange;
    position: relative;
    float:left;
    text-align: center;
    border-radius: 10px;
    text-decoration: none;
    color: white;
}

我的目标是让（仅）按钮的右侧在悬停时转向箭头峰值。结果应该类似于：

当鼠标悬停时，按钮应转换为原始形状。

这可以用CSS实现还是需要jQuery？

Answer 1

工作示例

jsfiddle

编辑，现在有转换

jsfiddle

编辑，现在有关于mouseout的转换

jsfiddle

HTML

<a href="#" class="button">login</a>

CSS

.button {
    padding: 5px 20px;
    background: orange;
    position: relative;
    float:left;
    text-align: center;
    border-radius: 10px;
    text-decoration: none;
    color: white;
    position:relative;
}
.button:after {
    content: " ";
    border: solid transparent;
    border-width: 0;
    border-left-color: orange;
    position: absolute;
    -webkit-transition: all 1s ease;
    left: 100%;
    top: 50%;
}
.button:hover:after {
    content: " ";
    display:block;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-left-color: orange;
    border-width: 25px;
    margin-top: -25px;
    margin-left: -10px;
}

Answer 2

无法使用css或jQuery（除非我不知道某个插件）。

基本上你必须有两张图片。一个用于普通按钮，一个用于箭头形按钮。而onNover只是使用背景转换来更改背景图像。但我觉得它看起来很难看。