摘要：<!DOCTYPE html>
<html>
<head>
<title>Js小动画By Johnson</title>
<style type="text/css" media
<!DOCTYPE html>
<html>
<head>
<title>Js小动画By Johnson</title>
<style type="text/css" media="screen">
*{margin:0;padding:0;}
div{width:100%;text-align:center;}
.btn{display: block;width: 310px;line-height: 40px;margin: 200px auto;background: #5FB878;border-radius: 2px;font-size:20px;font-weight: 700;text-align: center;color: #fff;border:none;outline:none;
}
</style>
<script type="text/javascript">
function mouse(y){
y.style.borderRadius="20px";
y.style.transition="1s";
y.style.backgroundColor="#FF5722";
}
function out(y){
y.style.borderRadius="2px";
y.style.transition="1s";
y.style.backgroundColor="#5FB878";
}
</script>
</head>
<body>
<div>
<button class="btn" onmouseover="mouse(this)" onmouseout="out(this)" onclick="alert('有话好好说嘛，干嘛点我！！')">提 交</button>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Js小动画By Johnson</title>
<style type="text/css" media="screen">
*{margin:0;padding:0;}
div{width:100%;text-align:center;}
.btn{display: block;width: 310px;line-height: 40px;margin: 200px auto;background: #5FB878;border-radius: 2px;font-size:20px;font-weight: 700;text-align: center;color: #fff;border:none;outline:none;
}
</style>
<script type="text/javascript">
function mouse(y){
y.style.borderRadius="20px";
y.style.transition="1s";
y.style.backgroundColor="#FF5722";
}
function out(y){
y.style.borderRadius="2px";
y.style.transition="1s";
y.style.backgroundColor="#5FB878";
}
</script>
</head>
<body>
<div>
<button class="btn" onmouseover="mouse(this)" onmouseout="out(this)" onclick="alert('有话好好说嘛，干嘛点我！！')">提 交</button>
</div>
</body>
</html>
