/*红色*/
.Ellipse1{
	width:50px;
	height:30px;
	border-radius:16px;
	background-color:#ccc;
	transition:0.3s;
	margin-bottom:10px;
}
.circle1{
	width:29px;
	height:29px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	transition:0.3s;
	position:relative;
	left:0px;
}
.circle1:hover{
	transform:scale(1.2);
	box-shadow:0px 1px 8px rgba(0,0,0,.5);
}
/*蓝色*/
.Ellipse2{
	width:50px;
	height:30px;
	border-radius:16px;
	background-color:#ccc;
	transition:0.3s;
	margin-bottom:10px;
}
.circle2{
	width:29px;
	height:29px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	transition:0.3s;
	position:relative;
	left:0px;
}
.circle2:hover{
	transform:scale(1.2);
	box-shadow:0px 1px 8px rgba(0,0,0,.5);
}
/*绿色*/
.Ellipse3{
	width:50px;
	height:30px;
	border-radius:16px;
	background-color:#ccc;
	transition:0.3s;
	margin-bottom:10px;
}
.circle3{
	width:29px;
	height:29px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	transition:0.3s;
	position:relative;
	left:0px;
}
.circle3:hover{
	transform:scale(1.2);
	box-shadow:0px 1px 8px rgba(0,0,0,.5);
}
/*橙色*/
.Ellipse4{
	width:50px;
	height:30px;
	border-radius:16px;
	background-color:#ccc;
	transition:0.3s;
	margin-bottom:10px;
}
.circle4{
	width:29px;
	height:29px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	transition:0.3s;
	position:relative;
	left:0px;
}
.circle4:hover{
	transform:scale(1.2);
	box-shadow:0px 1px 8px rgba(0,0,0,.5);
}
/*黄色*/
.Ellipse5{
	width:50px;
	height:30px;
	border-radius:16px;
	background-color:#ccc;
	transition:0.3s;
	margin-bottom:10px;
}
.circle5{
	width:29px;
	height:29px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	transition:0.3s;
	position:relative;
	left:0px;
}
.circle5:hover{
	transform:scale(1.2);
	box-shadow:0px 1px 8px rgba(0,0,0,.5);
}
/*紫色*/
.Ellipse6{
	width:50px;
	height:30px;
	border-radius:16px;
	background-color:#ccc;
	transition:0.3s;
	margin-bottom:10px;
}
.circle6{
	width:29px;
	height:29px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	transition:0.3s;
	position:relative;
	left:0px;
}
.circle6:hover{
	transform:scale(1.2);
	box-shadow:0px 1px 8px rgba(0,0,0,.5);
}
/*青色*/
.Ellipse7{
	width:50px;
	height:30px;
	border-radius:16px;
	background-color:#ccc;
	transition:0.3s;
	margin-bottom:10px;
}
.circle7{
	width:29px;
	height:29px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	transition:0.3s;
	position:relative;
	left:0px;
}
.circle7:hover{
	transform:scale(1.2);
	box-shadow:0px 1px 8px rgba(0,0,0,.5);
}七彩开关按钮,每一个都是独立的,直接可以引用。纯html+css+js代码,不需要图片做的按钮开关特效。希望大家喜欢!