纯CSS实现的3D简洁按钮设计

今天我们介绍一篇来自Brandon Pierce的3D按钮设计。希望大家喜欢！

demo下载：

基本HTML

1. <nav>
      
   
2.   <ul class="nav">
      
   
3.     <li><a href="#" class="icon-home"></a></li>

   
4.     <li><a href="#" class="icon-cog"></a></li>

   
5.     <li><a href="#" class="icon-cw"></a></li>

   
6.     <li><a href="#" class="icon-location"></a></li>

   
7.   </ul>
 </nav>

复制代码
图标字体CSS

1. @font-face {
   
2.   font-family: 'fontello';
   
3.   src: url('../fonts/fontello.eot');
   
4.   src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'),
   
5.        url('../fonts/fontello.woff') format('woff'),
   
6.        url('../fonts/fontello.ttf') format('truetype'),
   
7.        url('../fonts/fontello.svg#fontello') format('svg');
   
8.   font-weight: normal; font-style: normal;
   
9. }
   
10. [class*=" icon-"] {
    
11.   font-family: 'fontello';
    
12.   font-style: normal;
    
13.   font-size: 3em;
    
14.   speak: none;
    
15. }
    
16. .icon-home:after     { content: "\2302"; }
    
17. .icon-cog:after      { content: "\2699"; }
    
18. .icon-cw:after       { content: "\27f3"; }
    
19. .icon-location:after { content: "\e724"; }

复制代码
按钮CSS

1. .nav {   
   
2. list-style: none;
   
3.   text-align: center;
   
4. }
   
5. .nav li {   
   
6. position: relative;   
   
7. display: inline-block;   
   
8. margin-right: -4px;
   
9. }

复制代码
3D效果CSS，使用了box-shadow：

1. .nav a {   
   
2. display: block;   
   
3. background-color: #f7f7f7;   
   
4. background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));   
   
5. background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);   
   
6. background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
   
7.    background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);   
   
8. background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);    color: #a7a7a7;   
   
9. margin: 36px;   width: 144px;   
   
10. height: 144px;   
    
11. position: relative;   
    
12. text-align: center;
    
13.   line-height: 144px;
    
14.   border-radius: 50%;   
    
15. box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
    
16. }

复制代码
最后生成按钮的样式，使用:hover

1. .nav a:hover{
   
2.   text-decoration: none;
   
3.   color: #555;
   
4.   background: #f5f5f5;
   
5. }

复制代码


感谢GBin1的翻译整理。

【纯CSS实现的3D简洁按钮设计】相关文章

1. 纯CSS实现的3D简洁按钮设计

2. 纯CSS实现3D图像轮转

3. 分享Jquery+CSS3实现的3D下拉菜单特效

4. 纯CSS3实现的顶部社会化分享按钮

5. 一款纯css3实现的颜色渐变按钮

6. 纯CSS实现Tooltip

7. 纯css3 transforms 3D文字翻开翻转3D开放式效果

8. 纯CSS3实现圆角按钮

9. 使用CSS3设计漂亮的动画效果3D大按钮

10. 效果非常酷！纯CSS3实现的图片滑块程序

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