Easy css arrow button

HTML

<a href="" class="btn">Some text</a>


<!-- 

Here you can generate triangles:
http://apps.eky.hk/css-triangle-generator/
Other helpful stuff:
http://medleyweb.com/resources/css-generator-ui-animation/
 -->

CSS

body{
    margin:100px;
}
a.btn{
    height:50px;


    text-align:center;
    padding:0 10px;


}
a.btn:after{
    position:absolute;
    right:-20px;
    content:" ";
    width: 0px;
    height: 0px;


    border-color: transparent transparent transparent #007bff;
}
a.btn:hover{
    background-color:red;
}
a.btn:hover:after{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 25px 0 25px 20px;
    border-color: transparent transparent transparent #ff0000;
}