* {
	box-sizing:border-box;
}
body {
	padding:20px;
	background:#fff;
}
@keyframes xz {
	0% {
	}100% {
	transform:rotateY(360deg);
}
}@keyframes xzwys {
	0% {
	transform:rotateY(0deg);
}
100% {
	transform:rotateY(-360deg);
}
}.box {
	width:100px;
}
.dna {
	width:100px;
	height:11px;
	position:relative;
	background-color:#03BD9D;
	padding:5px 10px;
	background-clip:content-box;
	margin:1px 0;
	cursor:pointer;
}
.dna:before,.dna:after {
	content:"";
	position:absolute;
	top:0px;
	width:11px;
	height:11px;
	border-radius:100%;
	background-image:-webkit-radial-gradient(#efefef,#03BD9D);
}
.dna:before {
	left:5px;
}
.dna:after {
	right:5px;
}
.dna:hover {
	background-color:#EC971F;
}
.dna:hover:before,.dna:hover:after {
	background-image:-webkit-radial-gradient(#efefef,#EC971F);
}