立体按钮点击手机震动

1.HTML


2.CSS

button {
	outline: none;
}
			
.btn {
	width: 148px;
	height: 148px;
	font-size: 32px;
	border-radius: 50%;
	background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%);
	border: none;
	position: relative;
	border-bottom: 5px solid #2b8bc6;
	color: #fbfbfb;
	font-weight: 600;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
	text-align: center;
	box-shadow: 0px 3px 0px rgba(0, 0, 0, .2);
	cursor: pointer;
}

.btn:active {
	box-shadow: 0px 2px 0px rgba(0, 0, 0, .2);
	top: 2px;
}

3.JS

function btn() {
	navigator.vibrate = navigator.vibrate 
	 || navigator.webkitVibrate
	 || navigator.mozVibrate
	 || navigator.msVibrate;

	if(navigator.vibrate) {
		// 支持
		console.log("支持设备震动!");
	}
	
	navigator.vibrate([500, 300]);
}

效果图
立体按钮点击手机震动_第1张图片
立体按钮点击手机震动_第2张图片

你可能感兴趣的:(css,立体按钮,手机振动)