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

这些纯CSS代码制作的按钮大小可以根据字体大小自动调整，渐变色背景可以兼容各浏览器，并且有正常、鼠标滑向、点击三种状态样式，当然，如果您的浏览器不支持CSS3，那么按钮将没有圆角和阴影效果。

教程地址：http://www.helloweba.com/view-blog-239.html

演示地址：http://www.helloweba.com/demo/css3btn/

源码下载：http://www.helloweba.com/down-239.html

使用CSS3制作漂亮的按钮的更多相关文章

  1. CSS3制作漂亮的照片墙

    CSS3可以做动画大家肯定都是耳熟能详的了,但是大家有木有巧妙的利用这一个功能来制作一款漂亮的照片墙呢? 那么今天我们就利用CSS3动画这一特性来一起制作漂亮的照片墙吧! 第一部分:HTML 这里我们 ...

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

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. BonBon - 使用 CSS3 制作甜美的糖果按钮

    BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...

  4. 使用 CSS3 制作一组超时尚的动画按钮效果

    通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...

  5. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

  6. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  7. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  8. WebSlides - 轻松制作漂亮的 HTML 幻灯片（演讲稿）

    WebSlides 是一个开源的 HTML 幻灯片项目,能够帮助熟悉前端语言的开发者快速制作出效果精美的幻灯片.页面中的每个 <section> 都是一个独立的幻灯片,只需要很少的 CSS ...

  9. 推荐10款纯css3实现的实用按钮

    在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...

随机推荐

  1. 59.DDR3_IP核文件设置

    在ISE软件生成DDR3 IP核时,会产生很多文件,其中user_design,example_design里面分别是用户接口文件和自带的仿真测试文件.在user_design里的rtl中,这些文件是 ...

  2. 触摸屏校准tslib的配置文件

    ./autogen.sh#sleep 10./configure --prefix=/usr/lxl/tslib --host=arm-linux CC=arm-linux-gcc#sleep 100 ...

  3. [转]反向代理过程与Nginx特点详解

    原文链接:<Nginx搭建反向代理服务器过程详解> 1.1 反向代理初印象 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内 ...

  4. 邻接矩阵实现Dijkstra算法以及BFS与DFS算法

    //============================================================================ // Name : MatrixUDG.c ...

  5. c++ _beginthread

    c++多线程编程 #include <windows.h> #include <process.h> /* _beginthread, _endthread */ #inclu ...

  6. 11.5Daily Scrum

    人员 任务分配完成情况 明天任务分配 王皓南 实现网页上视频浏览的功能.研究相关的代码和功能.811 数据库测试 申开亮 实现网页上视频浏览的功能.研究相关的代码和功能.812 实现视频浏览的功能 王 ...

  7. 13、主线程任务太多导致异常退出（The application may be doing too much work on its main thread）

    今天花费了一天的时间来解决这个bug. 这种在程序运行期间出现的问题比较棘手,如果再没有规律的话就更难解决. 还好这个bug是由规律的,也就是说在程序执行半个小时左右后就会因为此异常而导致程序退出:那 ...

  8. WPF中的Style(风格,样式)（转）

    在WPF中我们可以使用Style来设置控件的某些属性值,并使该设置影响到指定范围内的所有该类控件或影响指定的某一控件,比如说我们想将窗口中的所有按钮都保持某一种风格,那么我们可以设置一个Style,而 ...

  9. 三星wep200蓝牙耳机中文说明书

    给耳机充电:耳机内部装有充电电池,第一次使用之前电一定要充满1,先将耳机放入所提供的充电盒中,关上盖.2,将配置器的接头插入充电盒的座孔内.并将另一端插入电源插座.*充电一直充到耳机指示灯由红变蓝*大 ...

  10. BZOJ3130 [Sdoi2013]费用流

    AC通道:http://www.lydsy.com/JudgeOnline/problem.php?id=3130 这题codevs上也有,不过数据挂了[要A得看discuss]. 题目大意: Ali ...