|
[tr][td]今天我们介绍一篇来自Brandon Pierce的3D按钮设计。希望大家喜欢！
图片：1747311y3esekenn223u5e.jpg  demo下载： 图片：1747311y3esekenn223u5e.jpg 纯CSS实现的3D简洁按钮设计.zip基本HTML [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] 复制代码 图标字体CSS [*]@font-face { [*] font-family: 'fontello'; [*] src: url('../fonts/fontello.eot'); [*] src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'), [*] url('../fonts/fontello.woff') format('woff'), [*] url('../fonts/fontello.ttf') format('truetype'), [*] url('../fonts/fontello.svg#fontello') format('svg'); [*] font-weight: normal; font-style: normal; [*]} [*][class*=" icon-"] { [*] font-family: 'fontello'; [*] font-style: normal; [*] font-size: 3em; [*] speak: none; [*]} [*].icon-home:after { content: "2302"; } [*].icon-cog:after { content: "2699"; } [*].icon-cw:after { content: "27f3"; } [*].icon-location:after { content: "e724"; } 复制代码 按钮CSS [*].nav { [*]list-style: none; [*] text-align: center; [*]} [*] .nav li { [*]position: relative; [*]display: inline-block; [*]margin-right: -4px; [*]} 复制代码 3D效果CSS，使用了box-shadow： [*].nav a { [*]display: block; [*]background-color: #f7f7f7; [*]background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7)); [*]background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); [*]background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); [*] background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); [*]background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7); color: #a7a7a7; [*]margin: 36px; width: 144px; [*]height: 144px; [*]position: relative; [*]text-align: center; [*] line-height: 144px; [*] border-radius: 50%; [*]box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff; [*]} 复制代码 最后生成按钮的样式，使用:hover [*].nav a:hover{ [*] text-decoration: none; [*] color: #555; [*] background: #f5f5f5; [*]} 复制代码 感谢GBin1的翻译整理。 [/td][/tr] |
|
