1 reply [Last post]
cbethalai
cbethalai's picture
Offline
newbie
Last seen: 5 years 27 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;
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);

}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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