html頁面做效果比較炫的按鈕

在工作中難免會遇到做頁面上的功能，有時候在設計一個按鈕的時候，有時候會比較糾結這個按鈕怎麼設計

這個時候我們會考慮

1. 按鈕的大小
2. 按鈕的位置
3. 按鈕的邊框弧度
4. 按鈕內字體的大小
5. 按鈕的背景色
6. 按鈕點擊後的背景色

等等一系列考慮，我現在分享下我在做一個tab頁功能的樣子

就是上圖中的3組tab按鈕，感覺效果還可以，下面上代碼

CSS:

.tab-wrapper {
  width: 100%;
  margin: 20px auto;
}

.tab-menu li {
  position:relative;
  background-color: #fff;
  color:#bcbcbc;
  display: inline-block;
  padding: 20px 20px;
  opacity: 0.8;
  cursor:pointer;
  z-index:0;
}

.tab-menu li:hover {
  color:#464646;
}

.tab-menu li .active:hover {
  color:#464646;
}

.tab-menu li.class-manage{
  background-color: #00EE76;
  color: #ffffff;
  background-image: linear-gradient(#00FF7F, #00EE76, #00CD66);
}

.tab-menu li.train-in{
  background-color: #76EE00;
  color: #ffffff;
  background-image: linear-gradient(#66CD00, #76EE00, #7FFF00);
}

.tab-menu li.train-final{
  background-color: #008B00;
  color: #ffffff;
  background-image: linear-gradient(#458B00, #008B00, #008B45);
}

.tab-menu li.class-manage.active {
  color:#464646;
  opacity: 1;
  background-color: #ffffff;
  background-image: linear-gradient(#ffffff,#ffffff);
}

.tab-menu li.train-in.active {
  color:#464646;
  opacity: 1;
  background-color: #ffffff;
  background-image: linear-gradient(#ffffff,#ffffff);
}

.tab-menu li.train-final.active {
  color:#464646;
  opacity: 1;
  background-color: #ffffff;
  background-image: linear-gradient(#ffffff,#ffffff);
}

.tab-content>div {
  background-color: #fff;
  box-sizing:border-box;
  width: 100%;
  min-height:200px;
  padding-top: 10px;
}

.line {
  position:absolute;
  width: 0;
  height: 7px;
  background-color: aqua;
  top: 0;
  left: 0;
}

 

HTML:

<div class="tab-wrapper">
            <ul class="tab-menu">
                <li custom-url="assistant" class="class-manage" th:classappend="${pageTitle=='學習助手'?'active':''}">學習助手</li>
                <li custom-url="notice" class="class-manage" th:classappend="${pageTitle=='發佈通知'?'active':''}">發佈通知</li>
                <li custom-url="exam" class="class-manage" th:classappend="${pageTitle=='發佈考試'?'active':''}">發佈考試</li>

                <li custom-url="statistics" class="train-in" th:classappend="${pageTitle=='報名統計'?'active':''}">報名統計</li>
                <li custom-url="take" class="train-in" th:classappend="${pageTitle=='請假管理'?'active':''}">請假管理</li>
                <li custom-url="learn" class="train-in" th:classappend="${pageTitle=='學習情況'?'active':''}">學習情況</li>

                <li custom-url="lecturer" class="train-final" th:classappend="${pageTitle=='講師評估'?'active':''}">講師評估</li>
                <li custom-url="project" class="train-final" th:classappend="${pageTitle=='項目評估'?'active':''}">項目評估</li>
                <li custom-url="training" class="train-final" th:classappend="${pageTitle=='培訓總結'?'active':''}">培訓總結</li>
                <li custom-url="tracking" class="train-final" th:classappend="${pageTitle=='課後跟蹤'?'active':''}">課後跟蹤</li>
            </ul>
            <div class="tab-content">
                <resource th:replace="${pageName}::index"></resource>
            </div>
        </div>

 

JS:

$(function(){


    var $wrapper = $('.tab-wrapper'),
        $tabMenu = $wrapper.find('.tab-menu li'),
        $line = $('<div class="line"></div>').appendTo($tabMenu);

    // $tabMenu.filter(':first-of-type').find(':first').width('100%')
    $("input[name=pageTitle]").val();
    $tabMenu.each(function(){
       if($(this).hasClass("active")){
           $(this).find('.line').animate({'width':'100%'}, 'fast');
       }
    });

    $tabMenu.on('click', function() {
        var pageName=$(this).attr("custom-url");
        var pageTitle=$(this).text();
        var id=$("#id").val();
        $.toUrl(ctx+'manage/trainingOutLine/processPage?id='+id+'&pageName='+pageName+'&pageTitle='+pageTitle,'線下培訓過程管理') ;
    });
})

如上代碼，結合自己的項目，進行相應的修改即可使用，如果想要更好的效果搭配，可以在這個基礎上進行調整