<!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制作圆角内发光按钮----示例的更多相关文章

  1. 使用CSS3制作漂亮的按钮

    我给大家介绍一下如何使用CSS3来制作一个圆角阴影.渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,sp ...

  2. 分享9款用HTML5/CSS3制作的动物人物动画

    1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...

  3. 使用HTML5/CSS3制作便签贴

    利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下: (注:图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢!) 注:该效果可以在Safari, Chrome,Fi ...

  4. HTML5+CSS3制作无限滚动与文字跳动效果

    ㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...

  5. HTML5+CSS3点击指定按钮显示某些内容效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JQuery+HTML5+CSS3制作时间轴插件，支持响应式布局

    一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...

  7. 纯HTML5+CSS3制作生日蛋糕

    以一个前端开发的身份绘制一个简单的蛋糕庆祝一下今天这个好日子吧,程序员庆生的乐趣与哀愁啊.写的比较简陋,感兴趣的看一下吧. 先发个效果图吧 蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分.HTML的布 ...

  8. html5+css3 制作音乐播放器

    //css// body , html{    margin:0;    padding:0;    font:12px Arial, Helvetica, sans-serif;    } .Mus ...

  9. Html5+Css3制作下拉菜单的三种方式

    一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...

随机推荐

  1. 机器学习实战-边学边读python代码(5)

    def classifyNB(vec2Classify, p0Vec, p1Vec, pClass1):    p1 = sum(vec2Classify * p1Vec) + log(pClass1 ...

  2. SqlCommandBuilder的讨论

    之前也看过别人的解释,总感觉解释的不太理想,当然我自己的解释我尽量解释理想点,SqlCommandBuilder 是提供给外界对数据库的反操作的,如果只是对数据库的一个提取的话,那么用下面的代码足以 ...

  3. Knights of the Round Table-POJ2942（双连通分量+交叉染色）

    Knights of the Round Table Description Being a knight is a very attractive career: searching for the ...

  4. asp.net core 通过 TeamCity 实现持续集成笔记

    0x00 很早之前就想体验一把持续集成的快感,然后刚好手头上有个 asp.net core 的项目,就想来部署一下持续集成.一开始我是想用 Jenkins 的,弄了好半天,git 仓库没法同步下来,我 ...

  5. Spring 定时任务2

    转载自http://www.cnblogs.com/nick-huang/p/4864737.html > 版本说明 <dependencies> <dependency> ...

  6. 17.KVM安装之虚拟磁盘,安装脚本

    1.创建磁盘 vm.list 指定虚拟磁盘名称和主机名 create_vm.sh    #创建vm.list中的虚拟磁盘,并指定大小100G #!/bin/bash VM_DIR="/opt ...

  7. PHP-----数据类型,运算符

    文件解析流程: 基本语法: 和Javascript很像.Ps:变量名可以使用关键字,但是最好不建议使用.关于PHP和HTML的混编,写起来可能比较方便,但是不便于阅读. 数据类型: 其中的资源类型是一 ...

  8. js判断鼠标进入以及离开容器的方向

      (注:以下代码涉及到jQuery,建议前端大牛绕路~~~) 1.遇到的问题      如图当鼠标右箭头位置上下移动的时候  下面的城市列表容器不能隐藏. 2.方法: 网上搜了些前端大牛们的解决办法 ...

  9. 《BI那点儿事》数据仓库建模：星型模式、雪片模式

    数据仓库建模 — 星型模式Example of Star Schema 数据仓库建模 — 雪片模式Example of Snowflake Schema 节省存储空间 一定程度上的范式 星形 vs.雪 ...

  10. Scrum Meeting 7-20151209

    任务安排 姓名 今日任务 明日任务 困难 董元财 服务器购买记录接口 请假(编译攻坚) 无 胡亚坤 发布记录和购买记录 请假(编译攻坚) 无 刘猛 完成Scrum Meeting 请假(编译攻坚) 无 ...