您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • jquery手册
  • 当前位置:首页 > 网页特效 > css样式 >

    圆形按钮HTML5/CSS3 button代码HTML5/CSS3 3D立体功能按钮在线演

    时间:2014-05-24 00:23 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    • HTML5/css3实现的圆形按钮,如果用传统的CSS来制作这种圆形的按钮,那估计只有是使用图片啦,现在有了CSS3/HTML5,似乎一切都变得简单了,那就不多说了,懂的都会去看代码吧。
    • <title>HTML5/CSS3 3D立体功能按钮在线演示</title>
      <style>
      .screen-reader-text {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }
      @font-face {
        font-family: 'fontello';
        src: url('http://css-tricks.com/examples/RoundButtons/fonts/fontello.eot');
        src: url('http://css-tricks.com/examples/RoundButtons/fonts/fontello.eot?#iefix') format('embedded-opentype'),
             url('http://css-tricks.com/examples/RoundButtons/fonts/fontello.woff') format('woff'),
             url('http://css-tricks.com/examples/RoundButtons/fonts/fontello.ttf') format('truetype'),
             url('http://css-tricks.com/examples/RoundButtons/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"; } 
      * { 
        -webkit-box-sizing: border-box; 
        -moz-box-sizing:    border-box; 
        box-sizing:         border-box; 
        margin: 0;
        padding: 0;
      }
      html {
        background: #f7f7f7 url(http://css-tricks.com/examples/RoundButtons/images/bg.png) repeat center top;
      }
      .nav {
        list-style: none;
        text-align: center;
      }
      .nav li {
        position: relative;
        display: inline-block;
        margin-right: -4px;
      }
      .nav li:before {
        content: "";
        display: block;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #fff;
        width: 100%;
        height: 1px;
        position: absolute;
        top: 50%;
        z-index: -1;
      }
      .nav a:link, .nav a:visited {
        display: block;
        text-decoration: none;
        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;
        border: solid 1px transparent;
      }
      .nav a:before {
        content: "";
        display: block;
        background: #fff;
        border-top: 2px solid #ddd;
        position: absolute;
        top: -18px;
        left: -18px;
        bottom: -18px;
        right: -18px;
        z-index: -1;
        border-radius: 50%;
        box-shadow: inset 0px 8px 48px #ddd;
      }
      .nav a:active {
        box-shadow: none;
        border: solid 1px #a7a7a7;
      }
      .nav a:hover {
        text-decoration: none;
        color: #555;
        background: #f5f5f5;
      }
      </style>
    圆形按钮HTML5/CSS3 button代码HTML5/CSS3 3D立体功能按钮在线演由源码搜藏网整理,转载请注明出处http://www.codesocang.com/tx-css/8023.html
    标签:网站源码