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;
}