arrowのCSSで使ったこちらのボタン
ホバーで回転するアニメーションが入っております。
アコーディオンの開閉ボタンなどで、クリックすると回転して上下の矢印が入れ替わるなどのエフェクトをよく見ます。

とくに難しい事もやっておらず、動きの間にtransitionを挟んでアニメーションを再現しているだけです。

動き付けてって言われた時などに使うのでメモ

button1

button2

button3

サンプル
html
    <p class="sample_btn01"><a href="">button1</a></p>
    <p class="sample_btn01"><a href="">button1</a></p>
css
	.sample_btn01 a{
		width: 200px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background: #86cecb;
		font-size: 16px;
		position: relative;
		border: 1px solid #86cecb;
        border-radius: 7px;
	}
	.sample_btn01 a:after{
		content: "";
	    width: 10px;
	    height: 10px;
	    display: inline-block;
	    border-top: 2px solid #fff;
	    border-right: 2px solid #fff;
	    position: absolute;
	    top: 40%;
	    right: 10px;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	}
	.sample_btn01:first-child a:after{
		-webkit-transform: rotate(135deg);
	    transform: rotate(135deg);
	}

上記は、afterで書き込んだ矢印を45度(右)と135度(左)に傾けている状態。この間にアニメーションを入れるわけですので、上記の135度の状態をhoverの指示に書き込みアニメーションのtransitionを追記します。

サンプル

button1

html
    <p class="sample_btn01"><a href="">button1</a></p>
css
	.sample_btn01 a{
		width: 200px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background: #86cecb;
		font-size: 16px;
		position: relative;
		border: 1px solid #86cecb;
        border-radius: 7px;
        -webkit-transition: 0.4s ease-in-out;
		transition: 0.4s ease-in-out;
	}
	.sample_btn01 a:after{
		content: "";
	    width: 10px;
	    height: 10px;
	    display: inline-block;
	    border-top: 2px solid #fff;
	    border-right: 2px solid #fff;
	    position: absolute;
	    top: 40%;
	    right: 10px;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	    -webkit-transition: 0.4s ease-in-out;
		transition: 0.4s ease-in-out;
	}
	.sample_btn01 a:hover{
		background: #fff;
		color: #86cecb !important;
		-webkit-transition: 0.4s ease-in-out;
		transition: 0.4s ease-in-out;
	}
	.sample_btn01 a:hover:after{
		border-color: #86cecb;
		-webkit-transform: rotate(135deg);
	    transform: rotate(135deg);
	    -webkit-transition: 0.4s ease-in-out;
		transition: 0.4s ease-in-out;
	}

rotateの角度指定(deg[degreeの略])は360度までではないので、回転を増やしたければ数字を増やせば多く回転します。