纯CSS实现的3D简洁按钮设计
今天我们介绍一篇来自Brandon Pierce的3D按钮设计。希望大家喜欢!
基本HTML
图标字体CSS
按钮CSS
3D效果CSS,使用了box-shadow:
最后生成按钮的样式,使用:hover
感谢GBin1的翻译整理。
demo下载:
基本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的翻译整理。
【纯CSS实现的3D简洁按钮设计】相关文章
2. 纯CSS实现3D图像轮转
7. 纯css3 transforms 3D文字翻开翻转3D开放式效果
8. 纯CSS3实现圆角按钮
本文来源:https://www.51html5.com/a879.html
上一篇:推荐13个CSS3快速开发工具
下一篇:分享一个纯CSS开发的气泡式提示框
﹝纯CSS实现的3D简洁按钮设计﹞相关内容
- 超可爱 纯CSS3实现的小猪、小老鼠、小牛
- 7款纯CSS3实现的炫酷动画应用
- 基于html5 canvas和js实现的水果忍者网页版
- Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
- Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
- 谷歌开源Gumbo:纯C语言实现的HTML5解析库
- CSS3实现的超棒3D Grid效果
- 更简洁的 CSS 清理浮动方式
- 一款非常棒的纯CSS3 3D菜单演示及制作教程
- 华丽的3d俄罗斯方块