CSS3: Change shape of button on hover

Question

I created a button:

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

My css so far is:

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

My goal is to have (only) the right side of the button turning to an arrow peak on hover. The result should be something similar like this:

When hovering out, the button shall transit to its original shape.

Is this something that can be achieved with CSS or is jQuery needed?

Answer 1

Working example

jsfiddle

EDIT, now with transition

jsfiddle

EDIT, now with transition on 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;
}