「ボタンhover時のいろいろなCSSアニメーションエフェクト」の（２）です。四角型は、hoverすると、角が丸くなります。丸形は、hoverすると、縦軸線対称や角度でそれぞれ回転します。

 

 

サンプルのhtmlソース

<ul>
	<li class="squ">‎Square-Circle</li>
	<li class="squ2">‎Square-Circle2</li>
	<li class="squ3">‎Square-Circle3</li> 
	<li class="circle">Circle</li>
	<li class="circle2">Circle2</li>
	<li class="circle3">‎Circle3</li>
</ul>

 

サンプルのCSSソース

#content ul {
	width:100%;
	}
#content li {
	list-style-type: none;
	background-color: #eee;
	display: inline-block;
	padding: 0;
	margin:0 0 40px 40px;
	font-size: 22px;
	opacity:0.8;
}
#content li.squ,#content li.squ2,#content li.squ3 {
	border-radius: 0;
	width:180px;
	height:100px;
	text-align:center;
	line-height:100px;
	padding: 0;
	border:4px solid #37d;
	-webkit-transition: .4s;
	transition: .4s;
	}
#content li.squ:hover {
	-webkit-border-radius: 50px;
	border-radius: 50px;
	background: #aaa;
	color:#fff;
	}
#content li.squ2:hover {
	-webkit-border-radius: 50px;
	border-radius: 50px;
	border:4px dotted tomato;
	color:tomato;
	background: #fff;
	}
#content li.squ3:hover {
	-webkit-border-radius: 50px;
	border-radius: 50px;
	border:4px dotted green;
	color:yellow;
	background: green;
	}
#content li.circle,#content li.circle2,
#content li.circle3 {
	width:100px;
	height:100px;
	text-align:center;
	line-height:100px;
	padding: 0;
	border:4px solid #37d;
	-webkit-border-radius: 52px;
	border-radius: 52px;
	-webkit-transition: .5s;
	transition: .5s;	
	}
#content li.circle {
	-webkit-transform: perspective(0) rotateY(0deg);
	transform: perspective(0) rotateY(0deg);
	margin:0 0 40px 85px;
	}
#content li.circle:hover {
	border:4px solid tomato;
	background: green;
	color:#fff;
	-webkit-transform: perspective(0) rotateY(180deg);
	transform: perspective(0) rotateY(180deg);
	}
#content li.circle2,#content li.circle3 {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	margin:0 0 40px 120px;
	}	
#content li.circle2:hover {
	border:4px dotted tomato;
	background:#444;
	color:#fff;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	}
#content li.circle3:hover {
	border:4px dotted green;
	color:green;
	background:#fff;
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	}