昨天已經說明CSS背景處理的過程，學習如何使用背景漸層色，和用圖片製作背景，今天要說的是如何製作網頁的按鈕。

最簡單的按鈕：button

之前在學習卡片製作的時候，已經有提過一種按鈕製作方式，HTML參考如下：

<div class="button">
  <a href="點選按鈕前往的連結"> <button>更多資訊</button></a>
</div>

自製按鈕

button這個語法所呈現的是HTML內建的按鈕樣式，一般網頁上已經比較少看到，一般會使用自製的按鈕。按鈕怎麼做呢？其實就只要讓一個容器內的文字變成有連結功能後，再加上CSS樣式就變成按鈕了。可以參考以下HTML語法：

<a href="點選按鈕前往的連結" class="button1">更多資訊</a>

這個語法其實就只是個超連結而已，可以套用以下CSS的語法看起來就是個按鈕了：

.button1{
  width:100px;
  height:1.5em;
  color:#FFFFFF;
  background-color:#000000;
  text-decoration: none;
  padding: 10px 20px;
  margin:20px 0;
  text-align:center;
}

群組按鈕

製作清單

另外一種比較常見放在網頁頂端的按鈕，可以透過ul和li的語法製作清單，可以透過HTML輸入半形的「ul＞＊5」之後再按tab鍵會自動出現清單語法，或是直接輸入以下語法：

<ul>
  <li>更多資訊</li>  <li>A</li>	<li>B</li>  <li>C</li>  <li>D</li>
</ul>

加入連結

若需要加上超連結，可以新增a的部分製作超連結，將該清單的文字夾住，可參考以下「更多資訊」HTML的語法：

<li><a href="點選按鈕的連結">更多資訊</a></li>

消除清單的圓點

由於li的前面會有圓點，需加入在a的文字套用樣式，消除圓點與超連結的裝飾，可以參考以下HTML與CSS。
清單按鈕HTML語法參考：

<ul class="group2">
  	<li class="button2"><a href="">更多資訊</a></li>  
    <li class="button2"><a href="">A</a></li>  
    <li class="button2"><a href="">B</a></li>  
    <li class="button2"><a href="">C</a></li>  
    <li class="button2"><a href="">D</a></li>
</ul>

清單按鈕CSS語法參考：

.group2{
  padding:0; /*清單左側會多約40px要消除*/
  display:flex; 
  justify-content:space-evenly; /*內容物水平均分*/
  list-style: none; /*消除清單的左側的圓點*/
}
/*清單按鈕樣式*/
.button2{
  background-color:#000000;
  padding: 10px 20px;
  margin:20px 0px;
  text-align:center;
}
/*清單按鈕文字樣式*/
.button2 a{
  display: block;
  width:100px;
  height:1.5em;
  color: #FFFFFF;
  text-decoration: none;
}

範例參考

以下範例為今天說明內容的實作頁面，包含前述所有案例的演示，最後我有用兩種方法製作群組按鈕，第一種是用單一自製按鈕組合而成；第二種是透過清單的方式再套上CSS樣式而成。為了讓兩種方法的外觀一致，有加了一些非必要的樣式，調整位置與外觀的樣式移除也是可以成功使用按鈕功能的。兩種方法各有優缺點，可以參考範例：https://codepen.io/hamagawa76/pen/gOeyxBo

是不是很簡單！明天會說明Bootstrap 5按鈕製作的部分了，我們明天見囉！