Control transitions for mouse over

I have pure css transition arrow button. On hover the button rotates 90 degree.

once I mouse out the arrow turns to original state, How to control to remain in same state even when i mouse out.

body {

}

.animatedcircle {
display: inline-block;
vertical-align: middle;
margin: 0em 0 0 0;
padding: 0;
text-align: center;
}

.animatedcircle a {
display: inline-block;
border-radius: 50%;
}

.animatedcircle a:hover .left, a:hover .top, a:hover .bottom, a:hover .right{

background: #e74c3c;

}

.animatedcircle a:hover .left:after, a:hover .top:after, a:hover .bottom:after, a:hover .right:after {
border-top: 0.3em solid #fff;
border-right: 0.3em solid #fff;

}

.bottom {
display: inline-block;
width: 2em;
height: 2em;
border: 0.2em solid #333;
border-radius: 50%;
margin-left: 0.50em;
transition-duration:1s;
}

.bottom:after {
content: '';
display: inline-block;
margin-top: 0.4em;
width: 0.5em;
height: 0.5em;
border-top: 0.3em solid #333;
border-right: 0.3em solid #333;
-moz-transform: rotate(135deg);

-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}

.bottom:hover
{
border: 0.2em solid #e74c3c;
transition-duration: 2s;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);

}