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