Jquery css plus关闭按钮

我需要一个css设计，其中方形按钮悬停改变加号交叉，而不是方形到圆形 我已经准备好了。但我不能像我的要求那样改变

$（函数（）{
//做点什么
$（“.btn square”）。单击（{animateIn:“圆形”，animateOut:“方形”}，animate_函数）；
函数动画_函数（事件）{
if（$（this.hasClass（event.data.animateIn））{
$（this.removeClass（event.data.animateIn）.addClass（event.data.animateOut）；
}
else if（$（this.hasClass（event.data.animateOut））{
$（this.removeClass（event.data.animateOut）.addClass（event.data.animateIn）；
}
否则{
$（this.addClass（'animated'+event.data.animateIn）；
}     
}
//结束行动
});

//变量
$btn圆形尺寸：100px；
$btn圆形旋转：135度；
$btn默认颜色：蓝色；
$btn关闭颜色：红色；
//风格
身体{
字体系列：无衬线；
}
.btn轮{
宽度：$btn圆形尺寸；
高度：$btn圆形尺寸；
边界半径：$btn圆形尺寸；
背景颜色：$btn默认颜色；
}
.btn广场{
宽度：$btn圆形尺寸；
高度：$btn圆形尺寸；
背景颜色：蓝色；
}
.结束{
位置：相对位置；
显示：内联块；
宽度：50px；
高度：50px；
顶部：25px；
左：25px；
溢出：隐藏；
&：：之前，&：：之后{
内容：''；
位置：绝对位置；
高度：2倍；
宽度：100%；
最高：50%；
左：0；
页边顶部：-1px；
背景：#fff；
}
&：：之前{
变换：旋转（0度）；
}
&：：之后{
变换：旋转（90度）；
}
} 
//动画
.动画{
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
}
@-webkit关键帧plusButton{
从{
-webkit变换原点：中心；
变换原点：中心；
-webkit变换：rotate3d（0,0,1，-$btn圆形旋转）；
变换：旋转3d（0,0,1，-$btn圆形旋转）；
背景色：$btn闭合色；
}
到{
-webkit变换原点：中心；
变换原点：中心；
-webkit转换：无；
转化：无；
背景颜色：$btn默认颜色；
}
}
@关键帧plusButton{
从{
-webkit变换原点：中心；
变换原点：中心；
-webkit变换：rotate3d（0,0,1，$btn-round-rotate）；
变换：旋转3d（0,0,1，$btn圆形旋转）；
背景色：$btn闭合色；
}
到{
-webkit变换原点：中心；
变换原点：中心；
-webkit转换：无；
转化：无；
背景颜色：$btn默认颜色；
}
}
布鲁斯布顿先生{
-webkit动画名称：plusButton；
动画名称：plusButton；
}
@-webkit关键帧关闭按钮{
从{
-webkit变换原点：中心；
变换原点：中心；
-webkit转换：无；
转化：无；
背景颜色：$btn默认颜色；
}
到{
-webkit变换原点：中心；
变换原点：中心；
-webkit变换：rotate3d（0,0,1，$btn-round-rotate）；
变换：旋转3d（0,0,1，$btn圆形旋转）；
背景色：$btn闭合色；
}
}
@关键帧关闭按钮{
从{
-webkit变换原点：中心；
变换原点：中心；
-webkit转换：无；
转化：无；
背景颜色：$btn默认颜色；
}
到{
-webkit变换原点：中心；
变换原点：中心；
-webkit变换：rotate3d（0,0,1，$btn-round-rotate）；
变换：旋转3d（0,0,1，$btn圆形旋转）；
背景色：$btn闭合色；
}
}
.关闭按钮{
-webkit动画名称：closeButton；
动画名称：closeButton；
}
@-webkit关键帧圆形{
从{
-webkit变换原点：中心；
变换原点：中心；
背景颜色：$btn默认颜色；
}
到{
-webkit变换原点：中心；
变换原点：中心；
-webkit变换：rotate3d（0,0,1，$btn-round-rotate）；
变换：旋转3d（0,0,1，$btn圆形旋转）；
背景色：$btn闭合色；
边界半径：$btn圆形尺寸；
}
}
@关键帧圆形{
从{
-webkit变换原点：中心；
变换原点：中心；
背景颜色：$btn默认颜色；
}
到{
-webkit变换原点：中心；
变换原点：中心；
-webkit变换：rotate3d（0,0,1，$btn-round-rotate）；
变换：旋转3d（0,0,1，$btn圆形旋转）；
背景色：$btn闭合色；
边界半径：$btn圆形尺寸；
}
}
.圆形{
-webkit动画名称：circleShape；
动画名称：圆形；
}
@-webkit关键帧方形形状{
从{
-webkit变换原点：中心；
变换原点：中心；
-webkit变换：rotate3d（0,0,1，$btn-round-rotate）；
变换：旋转3d（0,0,1，$btn圆形旋转）；
背景色：$btn闭合色；
边界半径：$btn圆形尺寸；
}
到{
-webkit变换原点：中心；
变换原点：中心；
背景颜色：$btn默认颜色；