CSS3按钮选择器:设计网页链接平滑的按钮


CSS3按钮选择器,通过CSS3新特性把普通的html链接设计成视觉上平滑的按钮,包括梯度背景、圆角、下拉阴影,以及转换等效果。支持CSS 3动画,可以把按钮逐渐地从默认状态变为悬停状态,你可以在不使用如上图那样的图片的情况下得到一个漂亮的按钮。


  1. button {
  2. -moz-border-radius: 25px;
  3. -moz-box-shadow: #6E7849 0px 0px 10px;
  4. -moz-transition: all 0.5s ease;
  5. -ms-transition: all 0.5s ease;
  6. -o-transition: all 0.5s ease;
  7. -webkit-border-radius: 25px;
  8. -webkit-box-shadow: #6E7849 0 0 10px;
  9. -webkit-transition: all 0.5s ease;
  10. background-color: #6E7849;
  11. background-image: -moz-linear-gradient(90deg, #B9C788, #6E7849);
  12. background-image: -ms-linear-gradient(90deg, #B9C788, #6E7849);
  13. background-image: -o-linear-gradient(90deg, #B9C788, #6E7849);
  14. background-image: -webkit-linear-gradient(90deg, #B9C788, #6E7849);
  15. background-image: linear-gradient(90deg, #B9C788, #6E7849);
  16. border-radius: 25px;
  17. border: 2px solid #4a5032;
  18. box-shadow: #6E7849 0px 0px 10px;
  19. color: #ffffff;
  20. display: inline-block;
  21. font-size: 4em;
  22. margin: auto;
  23. padding: 15px;
  24. text-decoration: none;
  25. text-shadow: #000000 5px 5px 15px;
  26. transition: all 0.5s ease;
  27. }
  28. .button:hover {
  29. padding: 15px;
  30. }



相关阅读:
js实现的的 文字自动''到google search框
php调用js文件的方法
Windows7 快捷键大全 提高您的工作效率
数据库自我调整介绍
读jQuery之八 包装事件对象
ASP简单实现数字字符混合验证码
教你配置安全稳定的SQL Server数据库
DEFER怎么用?
使用Modello编写JavaScript类
javascript URL锚点取值方法
Oracle 11g再创TPC-C基准测试性价比纪录
jquery 查找新建元素代码
如何用ASP编写网站统计系统2
Oracle数据库备份与恢复(1):exp和imp
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4