<!doctype html>
<html>
　　<head>
　　　　<meta charset="utf-8" />
　　　　<title>制作漂亮的圆角按钮<title>
　　　　<style type="text/css">
　　　　.loginBtnDiv
　　　　{
　　　　　　float:right;
　　　　　　padding-right:50px;
　　　　　　padding-top:10px;
　　　　}
　　　　.loginBtn, .ResgiterBtn{
　　　　　　display:-webkit-box;
　　　　　　padding:8px 30px;
　　　　　　font-size:16px;
　　　　　　border-style:none;
　　　　　　color:#FFFFFF;
　　　　　　background-color:#FF6600;
　　　　　　border:1px #FF6600 solid;
　　　　　　line-height:24px;
　　　　　　/*设置鼠标移动到按钮上编变成小手*/
　　　　　　cursor:pointer;
　　　　　　/*设置按钮的内发光效果*/
　　　　　　-webkit-box-shadow:inset 0px 0px 5px #fff;
　　　　　　-moz-box-shadow:inset 0px 0px 5px #fff;
　　　　　　box-shadow:inset 0px 0px 5px #fff;
　　　　　　/*设置按钮为圆角*/
　　　　　　-webkit-border-radius:8px;
　　　　　　-moz-border-radius:8px;
　　　　　　border-radius:8px;
　　　　}
　　　　.ResgiterBtn
　　　　{
　　　　　　background-color:#0066FF;
　　　　　　border:1px #0066FF solid;
　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="loginDiv">
　　　　　　<button class="loginBtn">登陆</button>
　　　　　　<button class="ResgiterBtn">注册</button>
　　　　</div>
　　</body>
</html>

 

效果如下：

javascript 圆形按钮 html按钮圆角_javascript 圆形按钮