CSS3学习随记-(Javascript)滑动按钮

效果展示：

通过js判定按钮位置来进行样式的修改，加入transition来达到滑动效果

<div class="backbtn" id="jsbackbtn">
	<div class="topbtn" id="jstopbtn" onclick="btn()"></div>
</div>

<style>
	/*底层按钮槽*/
	.backbtn {
		width: 60px;
		height: 20px;
		background-color: gray;
		border-radius: 25px;
		border-style: solid;
		border-width: 2px;
		border-color: #4C4C4C;
		/*设置过渡*/
		transition: 0.3s;
	}
	/*顶层按钮*/
	.topbtn {
		width: 40px;
		height: 20px;
		background-color: #4CAF50;
		border-radius: 25px;
		/*设置过渡和初始位置的数值*/
		transition: 0.2s;
		transform: translateX(0px)
	}
</style>

<script>
//判断函数：若(.topbtn)按钮是否已经移动过，否则将移动(.topbtn)和(.backbtn)至原来的位置

func