使用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>

效果如下:

时间: 2024-10-11 08:01:20

使用HTML5+CSS3制作圆角内发光按钮----示例的相关文章

使用HTML5/CSS3制作便签贴

利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下: (注:图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢!) 注:该效果可以在Safari, Chrome,Firefox和Opera在看到效果,IE上由于对HTML5的支持不完全,所以看不出效果. 第一步:创建基本HTML和正方形 首先添加基本的HTML结构以及构建基本的正方形,代码如下: XML/HTML Code复制内容到剪贴板 <ul> <li><a href=”#”> &l

使用CSS3制作漂亮的按钮

我给大家介绍一下如何使用CSS3来制作一个圆角阴影.渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,span,p,a,button,input等等. 这些纯CSS代码制作的按钮大小可以根据字体大小自动调整,渐变色背景可以兼容各浏览器,并且有正常.鼠标滑向.点击三种状态样式,当然,如果您的浏览器不支持CSS3,那么按钮将没有圆角和阴影效果. 教程地址:http://www.helloweba.com/v

HTML5 CSS3制作正方体3D效果

随着HTML5 CSS3的出现和发展,使得我们的网页可以实现更加复杂的效果,也使得我们的浏览体验更加丰富,所以今天我们将制作一个正方体的3D效果: 正方体需要六个面:那么我们就写一个ul列表,里面有六个li分别代表着正方体的六个面,而最外层的ul则可以作为这个正方体的参照物,代码如下: <ul> <li></li> <li></li> <li></li> <li></li> <li>&l

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

1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 Canvas动画非常炫酷,很多有创意的开发者可以利用HTML5的Canvas特性创造出很多不错的动画特效.今天我们要分享一款HTML5 Canvas头发飘逸动画,该动画模拟头发飘动的效果,加上可爱的人脸,可以说非常有技术含量,更富有创意. 在线演示 源码下载 3.HTML5/SVG实现随风摇摆的动画

html5+css3实战之-幽灵按钮

动画效果预览 网址:http://www.iuvo.si/ 1.首先分析幽灵按钮动画用到的动画效果有旋转,放大,淡入淡出 1> 涉及 css3的 transform rotate() 元素顺时针旋转 scale() 元素尺寸的放大或缩小 2> css3 过渡效果 transition 3> css 定位 position left:距离左边多少,正值向右,负值向左 right:距离右边多少,正值向左,负值向右 top:距离顶部多少,正值向下,负值向上 bottom:距离底部多少,正值向上

html5+css3 制作音乐播放器

//css// body , html{    margin:0;    padding:0;    font:12px Arial, Helvetica, sans-serif;    } .MusicBox   {          background-color: #212121;        background-image: -webkit-gradient(linear, left top, left bottom, from(#1B1B1B), to(#212121));   

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

一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover 时,设置ol的高度,transition渐变 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>&l

11个优秀的HTML5 &amp; CSS3下拉菜单制作教程

下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉上充满吸引力的下拉菜单. 1.Stunning Menu in CSS3 效果很精美CSS3菜单,可以让给你的网站提升一个层次.制作教程非常详细. 在线演示 源码下载 2.Click action Multi-level CSS3 Dropdown Menu 这是一个点击弹出的下拉菜单,传统的下拉菜

分享8款最新HTML5/CSS3功能插件及源码下载

1.HTML5/CSS3鬼脸表情下拉菜单 超级可爱 这款HTML5/CSS3鬼脸表情下拉菜单真的很特别,虽然菜单的实现并没有利用复杂的HTML5/CSS3技术,但是创意的确不错. 在线演示 源码下载 2.CSS3带Tooltip的按钮 按钮绿色清新 该按钮带有Tooltip功能,鼠标滑过按钮时即可显示Tooltip,另外按钮还有一个漂亮的图标.这款CSS3按钮整体是绿色清新风格,非常不错. 在线演示 源码下载 3.HTML5/CSS3制作Safari Logo 指针动画很炫 这款Logo动画,它