使用HTML5+CSS3制作圆角内发光按钮----示例
<!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>
?
效果如下：
轉載于:https://www.cnblogs.com/grnBlogs/p/4643320.html
總結
以上是生活随笔為你收集整理的使用HTML5+CSS3制作圆角内发光按钮----示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【百度地图API】让用户选择起点和终点的
- 下一篇： jquery检测浏览器类型