css 播放器按钮实现

效果图

 

 

 

 

html代码

 //播放按钮
		<div id="playBtn" class="circle" style="margin: 20px 0px 10px 20px;">
			<div class="circle_inner_play">
			</div>
		</div>
		
//暂停按钮
		<div id="pauseBtn" class="circle" style="margin: 20px 0px 10px 85px;">
			<div class="circle_inner_pause">
				▐▐
			</div>
		</div>
		
//重置按钮
		<div id="resetBtn" class="circle" style="margin: 20px 0px 10px 150px;">
			<div class="circle_inner_reset">
			</div>
		</div>

　　

 

css

 

                .circle {
				border: solid 1px #23527C;
				border-radius: 50px;
				height: 50px;
				position: absolute;
				width: 50px;
			}
			
			.circle:hover {
				transform: scale(1.1);
				-webkit-transform: scale(1.1);
				-moz-transform: scale(1.1);
			}
			
			
			.circle_inner_play {
				content: "";
				display: block;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 10px 0 10px 20px;
				border-color: transparent transparent transparent #23527C;
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -10px 0 0 -7px;
			}
			
			.circle_inner_pause {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -12px;
				margin-top: -10px;
				color: #23527C;
			}
			
			.circle_inner_reset {
				width: 18px;
				height: 18px;
				background-color: #23527C;
				margin: -9px 0 0 -9px;
				position: absolute;
				top: 50%;
				left: 50%;
			}

　　

转载于:https://www.cnblogs.com/Lxy-/p/5216002.html