1 reply [Last post]
cbethalai's picture
Last seen: 7 years 21 weeks ago
Timezone: GMT+5.5
Joined: 2015-02-02
Posts: 1
Points: 2

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;

.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);

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


Tony's picture
Last seen: 3 weeks 4 days ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

hi cbethalai, you may have to

hi cbethalai,
you may have to use JavaScript to trigger the state change.
there is no after hover state