CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS和CSS3按钮选择器对比

CSS和CSS3按钮选择器对比

CSS3按钮选择器,通过CSS3新特性把普通的html链接设计成视觉上平滑的按钮m包括梯度背景、圆角、下拉阴影,以及转换等效果。支持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.    } 

【CSS和CSS3按钮选择器对比】相关文章

1. CSS和CSS3按钮选择器对比

2. CSS3每日一练之选择器-结构性伪类选择器[三]

3. CSS3每日一练之选择器-结构性伪类选择器[二]

4. CSS3每日一练之选择器-兄弟元素选择器

5. CSS3每日一练之选择器-结构性伪类选择器[一]

6. CSS3每日一练之选择器-状态伪类选择器[五]

7. CSS3每日一练之选择器-属性选择器

8. CSS3每日一练之选择器-状态伪类选择器[四]

9. CSS3每日一练之选择器-状态伪类选择器[三]

10. CSS3每日一练之选择器-状态伪类选择器[二]

本文来源:https://www.51html5.com/a820.html

点击展开全部

﹝CSS和CSS3按钮选择器对比﹞相关内容

「CSS和CSS3按钮选择器对比」相关专题

其它栏目

也许您还喜欢