码迷,mamicode.com
首页 > Web开发 > 详细

使用HTML5+CSS3制作圆角内发光按钮----示例

时间:2015-07-13 18:27:13      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

 

效果如下:

技术分享

使用HTML5+CSS3制作圆角内发光按钮----示例

标签:

原文地址:http://www.cnblogs.com/grnBlogs/p/4643320.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!