Html5圈
demo下载：
纯CSS实现的3D简洁按钮设计.zip
基本HTML
- <nav>
- <ul class=”nav”>
- <li><a href=”#” class=”icon-home”></a></li>
- <li><a href=”#” class=”icon-cog”></a></li>
- <li><a href=”#” class=”icon-cw”></a></li>
- <li><a href=”#” class=”icon-location”></a></li>
- </ul> </nav>
复制代码
图标字体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的翻译整理。
未经允许不得转载：Html5圈 » 纯CSS实现的3D简洁按钮设计