在过去的Web开发中,通常使用Photoshop来设计按钮的样式。不过随着CSS3技术的发展,你完全可以通过几行代码来定制一个漂亮的按钮,并且还可以呈现渐变、框阴影、文字阴影等效果。此类按钮最大的优势是省去了加载图片的步骤,并且非常易于编辑、扩展和定制,你只需要更改代码即可。

本文收集了10套基于CSS3的按钮,你可以通过复制粘贴代码到你的CSS文件中来使用这些按钮。但需要注意的是,CSS3需要浏览器的支持,基本上这些按钮可以在大部分现代浏览器中完美呈现,但是在IE中支持还不够好。

1. 漂亮的CSS3按钮

2. 放射效果按钮

3. CSS3立体按钮

4. 基于伪元素的CSS按钮

5. Github风格的按钮

6. 社交媒体按钮

7. 糖果风格按钮

8. 基于RGBA的CSS3按钮

9. CSS3按钮集合

10. 长条形3D CSS3按钮

原文:http://www.iteye.com/news/24803
英文原文:10 GORGEOUS CSS3 BUTTONS, READY TO BE USED!

html页面button样式的更多相关文章

  1. 【译文】CSS技术:如何正确的塑造button样式!

    , but useful for */ display: inline-block; text-align: center; text-decoration: none; /* create a sm ...

  2. 微信小程序之分享或转发功能(自定义button样式)

    小程序页面内发起转发 通过给 button 组件设置属性open-type="share",可以在用户点击按钮后触发 Page.onShareAppMessage 事件,如果当前页 ...

  3. 纯css3手机页面图标样式代码

    全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...

  4. Form认证导致登陆页面的样式无效和图片不能显示的原因

    最近在做企业内门户网站,一切进展还算顺利,部署到生产环境的时候也能没有什么大问题,只是登录页面的样式不起作用,不知为何,因为是使用了login控件,最初以为是此控件有内置默认样式或者什么原因,于是就不 ...

  5. android_重写button样式

    这样的button样式应该源自IOS.假设安卓上实现,则须要使用android上面的layer-list来实现. 事实上layer-list有点像framlayout,作用就是覆盖. 先说一下实现原理 ...

  6. 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  7. 页面css样式找不到问题

    出现了一个页面没有样式的问题: 问题: 1.路径不对, 可以打开页面f12看样式是否找到 检查路径是否正确. 2.样式没引全或者没引对. 查看引入的样式是否正确或缺少样式. 3.路径明明写对了却404 ...

  8. 36种漂亮的CSS3网页按钮Button样式

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  9. android中样式和自定义button样式

    1)自定义button样式 一.采用图片方式 首先新建Android XML文件,类型选Drawable,根结点选selector,自定义一个文件名. 随后,开发环境自动在新建的文件里加了select ...

随机推荐

  1. Qt入门(12)——Qt国际化

    应用的国际化就是使应用成为能被非本国的人使用的过程.有的情况下,国际化很简单,例如,使一个US应用可被Australian或者British用户理解,工作可能少于几个拼写修正.但是使一个US应用可以被 ...

  2. 数据结构(KD树):HDU 4347 The Closest M Points

    The Closest M Points Time Limit: 16000/8000 MS (Java/Others)    Memory Limit: 98304/98304 K (Java/Ot ...

  3. 生成树的计数(基尔霍夫矩阵):BZOJ 1002 [FJOI2007]轮状病毒

    1002: [FJOI2007]轮状病毒 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 3928  Solved: 2154[Submit][Statu ...

  4. 修改MySQL的递增的起始值

    在mysql中,有时候需要把递增的值初始化为1(你也可以修改成其它起始值): alter table table_name auto_increment=; 不要设置为0......

  5. 在Linux下查看环境变量

    原文地址:http://blog.chinaunix.net/uid-25124785-id-77098.html 有时候在编写makefile的时候,自己都不清楚有些变量是什么,也不清楚如何查看,于 ...

  6. ASIHttpRequest或者SDWebImage给UIImageView加载图片的逻辑是什么样子的

    非常非常喜欢SDWebImage,就算后来AF也做了图片缓存,我也还是一直使用.图片缓存真的是一件令人头疼的事,但是SDWebImage封装了一切,你所需要的只是简单的set一个URL:1.设置一个展 ...

  7. Spring Boot 入门概念介绍

    使用spring-boot快速开发spring应用 转 http://itindex.net/detail/49108-spring-boot-%E5%BC%80%E5%8F%91 spring多年以 ...

  8. mvc与mvvm

    mvc:被动型式的,也就是说,只有view有要求的时候,控制器才有反应 View     Controller       Model 可以把一个页面看作是由多个view组成 Controller控制 ...

  9. svcutil 生成代理类时的问题

    如果有这个的xsd, group内嵌choice的结构: <xs:complexType name="CreateType">        <xs:sequen ...

  10. Android运行时注解

    Android的注解有编译时注解和运行时注解,本文就介绍下运行时注解. 其实非常简单,直接上代码:本文主要是替代传统的findViewById()的功能,就是在我们Activity中不需要再使用fin ...