ทำปุ่มด้วยการกำหนด css ให้กับ tag ul

[aegkaluk]

Code: [Select]

<style>
/*******************
        * TABBER    *
        ********************/
         .tabs {
        display: block;
        margin: 0px;
        padding: 0px;
        background: #f8f8f8 !important;
        }
        .tabs li {
        float: left;
        display: inline;
        }
        .tabs li a {
        float: left;
        display: block;
        margin: 0px 3px 0px 0px;
        padding: 7px;
        font-weight: bold;
        background: #fff;
        border: 1px solid #e6e6e6;
        }
        .tabs li a:hover {
        background: #5CA12F;
        color: #fff !important;
        text-decoration: none;
        }
        .tabs li a.selected, .tabs li a.selected:hover {
        background: #5CA12F;
        color: #fff !important;
        }
        .tabcontent {
        display: none;
        margin: 7px 0px 0px 0px !important;
        padding: 0px 0px 10px 0px !important;
        }
        .tabcontent ul {
        margin: 0px;
        padding: 0px;
        }
        .tabcontent li {
        list-style: none;
        background: #fff;
        margin: 0px 10px;
        padding: 7px 0px;
        border-bottom: 1px dotted #ddd;
        }
        .tabcontent li a {
        margin: 0px;
        padding: 0px;
        color: #333 !important;
        }

</style>


<ul class="tabs" id="tabs">
 <li>
 <a class="selected" href="#popular-posts" rel="popular-posts">Button1</a>
 </li>
 <li>
 <a class="" href="#recent-comments" rel="recent-comments">Button2</a>
 </li>
</ul>