How can I scale and rotate a rounded search btn? - css

Question

I have rounded submit btn, that I want to scale to 80% from the start and when I hover it I want it to scale to 100% and also rotate 360 degrees. Here's the code, I haven't have any luck finding any answers on the web.
header #searchbtn{
background: url(../img/roundedsearchbtn.png) no-repeat;
border: 0;
cursor: pointer;
display: inline-block;
float: right;
height: 41px;
filter: alpha(opacity=60);
opacity: 0.60;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
overflow: hidden;
text-indent: 100%;
width: 41px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
-transform: scale(0.8);
}
header #searchbtn:hover, header #searchbtn:focus {
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-ms-transform: rotate(360deg) scale(1);
-o-transform: rotate(360deg) scale(1);
-transform: rotate(360deg) scale(1);
}

Answer 1

This is what you want? Fiddle
Just add these CSS rules:
button {
-webkit-transform: rotate(0) scale(.8,.8);
-moz-transform: rotate(0) scale(.8,.8);
transform: rotate(0) scale(.8,.8);
}
button:hover {
-webkit-transform: rotate(360deg) scale(1,1);
-moz-transform: rotate(360deg) scale(1,1);
transform: rotate(360deg) scale(1,1);
}