我给大家介绍一下如何使用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. [quote ]ffmpeg, gstreamer, Raspberry Pi, Windows Desktop streaming

    [quote ]ffmpeg, gstreamer, Raspberry Pi, Windows Desktop streaming http://blog.pi3g.com/2013/08/ffmp ...

  2. Android实现传感器应用及位置服务

    Android实现传感器应用及位置服务 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 代码实现 这里需用获取加速度传感器和地磁传感器,手机获取旋转的方 ...

  3. jQuery ajax的traditional参数的作用

    一般的,可能有些人在一个参数有多个值的情况下,可能以某个字符分隔的形式传递,比如页面上有多个checkbox: ? 1 2 3 4 5 6 $.ajax{       url:"xxxx&q ...

  4. 0x0A和0x0D

    这里主要是在windows下面做的小实验,linux没有试 先贴源码 #include <iostream> #include <string> #include <st ...

  5. 项目中添加Log4J支持

    首先,在项目中的classes 中新建立一个log4j.properties文件即可: 在实际编程时,要使Log4j真正在系统中运行事先还要对配置文件进行定义.定义步骤就是对Logger.Append ...

  6. 评价正在使用输入法软件产品----QQ拼音输入法

    评价一下大家手头正在使用输入法或者搜索类的软件产品. 我现在使用的是系统自带的QQ拼音输入法,以前使用的是搜狗拼音输入法,后来发现可能由于我的系统重装过好几次,搜狗输入法也重装了好几次,而每次都删不干 ...

  7. SQL SERVER数据库修改是否区分大小写

    昨天去客户,发现程序无法应用,跟踪错误提示,提示的大致意思是“数据库表名和数据库字段名不存在”.查询后发现是SQL Server数据库设置了区分大小写的缘故(一般安装时,Oracle的正确安装下是默认 ...

  8. 【Path Sum II】cpp

    题目: Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the give ...

  9. Entity Framework 学习之--Ling to entity实现分页

    最近用MVC做的一个项目涉及到分页,中间用了entity framework来查数据库,不用直接写sql语句,方便了很多. 一般分页的思路是获得两个变量的值: 1.一共有多少条记录 totalCoun ...

  10. 你自认为理解了JavaScript？

    关于Dmitry Baranovskiy 的博客中一篇文章(http://dmitry.baranovskiy.com/post/91403200),其中有五段小代码,用来测试是否理解 JavaScr ...