|
[tr][td]CSS3按钮选择器，通过CSS3新特性把普通的html链接设计成视觉上平滑的按钮m包括梯度背景、圆角、下拉阴影，以及转换等效果。支持CSS 3动画，可以把按钮逐渐地从默认状态变为悬停状态，你可以在不使用如上图那样的图片的情况下得到一个漂亮的按钮。
图片：175846ix9zpm5uipupew2i.png  [*]button { [*] -moz-border-radius: 25px; [*] -moz-box-shadow: #6E7849 0px 0px 10px; [*] -moz-transition: all 0.5s ease; [*] -ms-transition: all 0.5s ease; [*] -o-transition: all 0.5s ease; [*] -webkit-border-radius: 25px; [*] -webkit-box-shadow: #6E7849 0 0 10px; [*] -webkit-transition: all 0.5s ease; [*] background-color: #6E7849; [*] background-image: -moz-linear-gradient(90deg, #B9C788, #6E7849); [*] background-image: -ms-linear-gradient(90deg, #B9C788, #6E7849); [*] background-image: -o-linear-gradient(90deg, #B9C788, #6E7849); [*] background-image: -webkit-linear-gradient(90deg, #B9C788, #6E7849); [*] background-image: linear-gradient(90deg, #B9C788, #6E7849); [*] border-radius: 25px; [*] border: 2px solid #4a5032; [*] box-shadow: #6E7849 0px 0px 10px; [*] color: #ffffff; [*] display: inline-block; [*] font-size: 4em; [*] margin: auto; [*] padding: 15px; [*] text-decoration: none; [*] text-shadow: #000000 5px 5px 15px; [*] transition: all 0.5s ease; [*] } [*] .button:hover { [*] padding: 15px; [*] } [*] [/td][/tr] |
|
