12款css按钮样式

admin · 发表于 2021-6-28 01:47:51

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name="Copyright" content="特效代码 " />



<title>特效代码</title>

</head>





<style type="text/css">

    body {

        margin:0;

        padding:0;

        font: bold 11px/1.5em Verdana;

}



h2 {

        font: bold 14px Verdana, Arial, Helvetica, sans-serif;

        color: #000;

        margin: 0px;

        padding: 0px 0px 0px 15px;

}



img {

border: none;

} 

 

/*- Menu Tabs 1--------------------------- */ 





    #tabs1 {

      float:left;

      width:100%;

          background:#F4F7FB;

      font-size:93%;

      line-height:normal;

          border-bottom:1px solid #BCD2E6;

      }

    #tabs1 ul {

          margin:0;

          padding:10px 10px 0 50px;

          list-style:none;

      }

    #tabs1 li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabs1 a {

      float:left;

      background:url("#") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabs1 a span {

      float:left;

      display:block;

      background:url("#") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#627EB7;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs1 a span {float:none;}

    /* End IE5-Mac hack */

    #tabs a:hover span {

      color:#627EB7;

      }

    #tabs1 a:hover {

      background-position:0% -42px;

      }

    #tabs1 a:hover span {

      background-position:100% -42px;

      }





          

/*- Menu Tabs 2--------------------------- */



    #tabs2 {

      float:left;

      width:100%;

      font-size:93%;

      line-height:normal;

          border-bottom:1px solid #84776B;

      }

    #tabs2 ul {

          margin:0;

          padding:10px 10px 0 50px;

          list-style:none;

      }

    #tabs2 li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabs2 a {

      float:left;

      background:url("#") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabs2 a span {

      float:left;

      display:block;

      background:url("#") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#84776B;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs2 a span {float:none;}

    /* End IE5-Mac hack */

    #tabs2 a:hover span {

      color:#74675B;

      }

    #tabs2 a:hover {

      background-position:0% -42px;

      }

    #tabs2 a:hover span {

      background-position:100% -42px;

      }

        

        

        

/*- Menu Tabs 3--------------------------- */



    #tabs3 {

      float:left;

      width:100%;

      background:#E4E6EB;

      font-size:93%;

      line-height:normal;

      }

    #tabs3 ul {

          margin:0;

          padding:10px 10px 0 50px;

          list-style:none;

      }

    #tabs3 li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabs3 a {

      float:left;

      background:url("#") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabs3 a span {

      float:left;

      display:block;

      background:url("#") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#FFF;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs3 a span {float:none;}

    /* End IE5-Mac hack */

    #tabs3 a:hover span {

      color:#FFF;

      }

    #tabs3 a:hover {

      background-position:0% -42px;

      }

    #tabs3 a:hover span {

      background-position:100% -42px;

      }  

        

        

        

/*- Menu Tabs 4--------------------------- */



    #tabs4 {

      float:left;

      width:100%;

      font-size:93%;

      line-height:normal;

          border-bottom:1px solid #6B78A9;

      }

    #tabs4 ul {

          margin:0;

          padding:10px 10px 0 50px;

          list-style:none;

      }

    #tabs4 li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabs4 a {

      float:left;

      background:url("#") no-repeat left top;

      margin:0;

      padding:0 0 0 7px;

      text-decoration:none;

      }

    #tabs4 a span {

      float:left;

      display:block;

      background:url("#") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#6B78A9;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs4 a span {float:none;}

    /* End IE5-Mac hack */

    #tabs4 a:hover span {

      color:#6B78A9;

      }

    #tabs4 a:hover {

      background-position:0% -42px;

      }

    #tabs4 a:hover span {

      background-position:100% -42px;

      }  

        

        

        

/*- Menu Tabs 5--------------------------- */



    #tabs5 {

      float:left;

      width:100%;

      background:#E3ECF3;

      font-size:93%;

      line-height:normal;



      }

    #tabs5 ul {

          margin:0;

          padding:10px 10px 0 50px;

          list-style:none;

      }

    #tabs5 li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabs5 a {

      float:left;

      background:url("#") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabs5 a span {

      float:left;

      display:block;

      background:url("#") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#FFF;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs5 a span {float:none;}

    /* End IE5-Mac hack */

    #tabs5 a:hover span {

      color:#FFF;

      }

    #tabs5 a:hover {

      background-position:0% -42px;

      }

    #tabs5 a:hover span {

      background-position:100% -42px;

      }  

        

        

        

/*- Menu Tabs 6--------------------------- */



    #tabs6 {

      float:left;

      width:100%;

      background:#efefef;

      font-size:93%;

      line-height:normal;

          border-bottom:1px solid #666;

      }

    #tabs6 ul {

          margin:0;

          padding:10px 10px 0 50px;

          list-style:none;

      }

    #tabs6 li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabs6 a {

      float:left;

      background:url("#") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabs6 a span {

      float:left;

      display:block;

      background:url("#") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#FFF;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs6 a span {float:none;}

    /* End IE5-Mac hack */

    #tabs6 a:hover span {

      color:#FFF;

      }

    #tabs6 a:hover {

      background-position:0% -42px;

      }

    #tabs6 a:hover span {

      background-position:100% -42px;

      }

        

        

        

/*- Menu Tabs 7--------------------------- */



    #tabs7 {

      float:left;

      width:100%;

      background:#D4DAE7;

      font-size:93%;

      line-height:normal;

          border-bottom:1px solid #333B66;

      }

    #tabs7 ul {

          margin:0;

          padding:10px 10px 0 50px;

          list-style:none;

      }

    #tabs7 li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabs7 a {

      float:left;

      background:url("#") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabs7 a span {

      float:left;

      display:block;

      background:url("#") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#999;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs7 a span {float:none;}

    /* End IE5-Mac hack */

    #tabs7 a:hover span {

      color:#ECB546;

      }

    #tabs7 a:hover {

      background-position:0% -42px;

      }

    #tabs7 a:hover span {

      background-position:100% -42px;

      }

        

        

        

/*- Menu Tabs 8--------------------------- */



    #tabs8 {

      float:left;

      width:100%;

      background:#FCF1F6;

      font-size:93%;

      line-height:normal;

          border-bottom:1px solid #E276A7;

      }

    #tabs8 ul {

          margin:0;

          padding:10px 10px 0 50px;

          list-style:none;

      }

    #tabs8 li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabs8 a {

      float:left;

      background:url("#") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabs8 a span {

      float:left;

      display:block;

      background:url("#") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#333;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs8 a span {float:none;}

    /* End IE5-Mac hack */

    #tabs8 a:hover span {

      color:#591333;

      }

    #tabs8 a:hover {

      background-position:0% -42px;

      }

    #tabs8 a:hover span {

      background-position:100% -42px;

      }

        

        

        

/*- Menu Tabs 9--------------------------- */



    #tabs9 {

      float:left;

      width:100%;

      font-size:93%;

          border-bottom:1px solid #F45551;

      line-height:normal;

      }

    #tabs9 ul {

          margin:0;

          padding:10px 10px 0 50px;

          list-style:none;

      }

    #tabs9 li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabs9 a {

      float:left;

      background:url("#") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabs9 a span {

      float:left;

      display:block;

      background:url("#") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#FFF;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs9 a span {float:none;}

    /* End IE5-Mac hack */

    #tabs9 a:hover span {

      color:#FFF;

      }

    #tabs9 a:hover {

      background-position:0% -42px;

      }

    #tabs9 a:hover span {

      background-position:100% -42px;

      }

        

        

        

/*- Menu Tabs 10--------------------------- */



    #tabs10 {

      float:left;

      width:100%;

      font-size:93%;

          border-bottom:1px solid #2763A5;

      line-height:normal;

      }

    #tabs10 ul {

          margin:0;

          padding:10px 10px 0 50px;

          list-style:none;

      }

    #tabs10 li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabs10 a {

      float:left;

      background:url("#") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabs10 a span {

      float:left;

      display:block;

      background:url("#") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#FFF;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs10 a span {float:none;}

    /* End IE5-Mac hack */

    #tabs9 a:hover span {

      color:#FFF;

      }

    #tabs10 a:hover {

      background-position:0% -42px;

      }

    #tabs10 a:hover span {

      background-position:100% -42px;

      }

        

        

        

/*- Menu Tabs 11--------------------------- */



    #tabs11 {

      float:left;

      width:100%;

          background:#F9F7F3;

      font-size:93%;

      line-height:normal;

          border-bottom:1px solid #C2BDAE;

      }

    #tabs11 ul {

          margin:0;

          padding:10px 10px 0 50px;

          list-style:none;

      }

    #tabs11 li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabs11 a {

      float:left;

      background:url("#") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabs11 a span {

      float:left;

      display:block;

      background:url("#") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#9F9584;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs11 a span {float:none;}

    /* End IE5-Mac hack */

    #tabs11 a:hover span {

      color:#FFF;

      }

    #tabs11 a:hover {

      background-position:0% -42px;

      }

    #tabs11 a:hover span {

      background-position:100% -42px;

      }

        

        

        

/*- Menu Tabs 12--------------------------- */



    #tabs12 {

      float:left;

      width:100%;

          background:#F9F7F3;

      font-size:93%;

      line-height:normal;

          border-bottom:1px solid #C2BDAE;

      }

    #tabs12 ul {

          margin:0;

          padding:10px 10px 0 50px;

          list-style:none;

      }

    #tabs12 li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabs12 a {

      float:left;

      background:url("#") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabs12 a span {

      float:left;

      display:block;

      background:url("#") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#E4D6CD;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs12 a span {float:none;}

    /* End IE5-Mac hack */

    #tabs12 a:hover span {

      color:#FFF;

      }

    #tabs12 a:hover {

      background-position:0% -42px;

      }

    #tabs12 a:hover span {

      background-position:100% -42px;

      }   

</style>

</head>



<body>



        <div>

<a href="#" alt="ExplodingBoy - Home" /></a>

        </div>









<h2>Tab Menu 1</h2>

<div id="tabs1">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

        <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

<br /><br />



<h2>Tab Menu 2</h2>

<div id="tabs2">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

        <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

<br /><br />



<h2>Tab Menu 3</h2>

<div id="tabs3">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

        <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

<br /><br />



<h2>Tab Menu 4</h2>

<div id="tabs4">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

        <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

<br /><br />



<h2>Tab Menu 5</h2>

<div id="tabs5">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

        <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

<br /><br />



<h2>Tab Menu 6</h2>

<div id="tabs6">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

        <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

<br /><br />



<h2>Tab Menu 7</h2>

<div id="tabs7">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

        <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

<br /><br />



<h2>Tab Menu 8</h2>

<div id="tabs8">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

        <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

<br /><br />



<h2>Tab Menu 9</h2>

<div id="tabs9">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

        <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

<br /><br />



<h2>Tab Menu 10</h2>

<div id="tabs10">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

        <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

<br /><br />



<h2>Tab Menu 11</h2>

<div id="tabs11">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

        <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

<br /><br />



<h2>Tab Menu 12</h2>

<div id="tabs12">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

        <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

<br /><br />

<br></a>

</body>

</html>

版权声明

1、转载或引用本网站内容须注明原网址，并标明本网站网址(http://www.cece56.com)。

2、转载或引用本网站中的署名文章，请按规定向原作者支付稿酬【除免费外】。

3、对于不当转载或引用本网站内容而引起的民事纷争、行政处理或其他损失，本网站不承担责任。

4、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。

本网站所提供的信息，只供参考之用。本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误对用户或任何其他人士负任何直接或间接的责任。在法律允许的范围内，本网站在此声明,不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接或项目所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿（包括但不限于收益、预期利润的损失或失去的业务、未实现预期的节省）。本网站所提供的信息，若在任何司法管辖地区供任何人士使用或分发给任何人士时会违反该司法管辖地区的法律或条例的规定或会导致本网站或其第三方代理人受限于该司法管辖地区内的任何监管规定时，则该等信息不宜在该司法管辖地区供该等任何人士使用或分发给该等任何人士。用户须自行保证不会受限于任何限制或禁止用户使用或分发本网站所提供信息的当地的规定。本网站图片，文字之类版权申明，因为网站可以由注册用户自行上传图片或文字，本网站无法鉴别所上传图片或文字的知识版权，如果侵犯，请及时通知我们，本网站将在第一时间及时删除。凡以任何方式登陆本网站或直接、间接使用本网站资料者，视为自愿接受本网站声明的约束。

本文地址：http://cece56.cn/forum.php?mod=viewthread&tid=196

样机素材

海报

卡通/插画

PS工具

名片/卡证

画册/装帧

LOGO/标识

DM/宣传单

包装设计

展板/展架

直通车/主图

详情页模板

首页模板

通用模板

节日促销模板

电商/淘宝海报

3D模型

材质贴图

装饰设计

室内设计

建筑

园林

移动界面

网页界面

游戏界面

icon图标

AE模板

绘声绘影

PR模板

Edius模板

视频素材

实拍视频

商用摄影图

图片素材

AE模板

绘声绘影

PR模板

Edius模板

视频素材

实拍视频

社交媒体用图

移动H5

信息长图

表情包配图

视频素材

实拍视频

keynote模板

PPT图表

产品发布

营销企划宣传

图表模板

费用报表

人力资源

购销发货

管理表格

教育文档

专业资料

资格/认证考试

论文/文献

生活/休闲

其他类型

IT/互联网

综合职能

金融银行

房地产/物业

教育/咨询

贸易/物流

已有账号？

注册后更精彩

客服电话

电子邮件

12款css按钮样式

版权声明

热门下载分类

常见问题

关于我们

产品服务