今天要介紹的是之前沒提過的特性，是全新的一篇整理！以按鈕為例子說明，先附上HTML程式碼。

<button>這是一個按鈕</button>

除了基本更改按鈕的背景顏色、字體顏色、高寬以外，我們還可以做出更多不同效果。

• 陰影
  最基本陰影效果的值包含x值、y值、顏色，其中x及y可以為負值，預設右邊為正。
  box-shadow: 4px 5px #b8b8b8;
  →
  如果想要陰影有模糊效果可以加入第三個值，此值不能為負。
  box-shadow: 4px 5px 2px #b8b8b8;
  →
• 鼠標懸停時顯示
  目前提到的美化效果都僅限一眼能看到的狀態，如果想要滑鼠移到按鈕上時有不同的變化可以使用「偽元素」:hover。
  • 鼠標懸停時改變顏色，可以這樣寫。

    button:hover {
        background-color: white;
    }
    

    
  • 鼠標懸停時不只按鈕變色，鼠標也要變為點擊小手的話，可以這樣寫。

    button:hover {
        background-color: white;
        cursor: pointer;
    }
    

    
• 禁用按鈕
  先提供HTML程式碼：

  <button>這是正常按鈕</button>
  <button class="not_allowed">這是禁用按鈕</button>
  

  • 有些時候按鈕必須製作出來，但是並沒有要給他一個功能，這時候就可以將按鈕禁用，讓使用者知道這是一個無效按鈕。

    button:hover {
        background-color: white;
        cursor: pointer;
    }
    button.not_allowed:hover {
        background-color: white;
        cursor: not-allowed;
    }
    

    

  • 為了讓使用者更能一眼看出它是個禁用按鈕，可以設定不透明度opacity，其值在0-1之間。

    button.not_allowed {
        /* 設定與正常按鈕相同顏色再設定不透明度 */
        background-color: rgb(171, 193, 235); 
        opacity: 0.5;
    }
    button.not_allowed:hover {
        cursor: not-allowed;
    }
    

    

今天就介紹到這，個人覺得設定按鈕非常有趣，因為可以有各種效果可以玩，有興趣的各位可以自己找來練習！我是YQ，完賽倒數1天，明天見。