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. }

« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3