如今，網站和應用的頁面布局越來越多地采用九宮格按鈕。九宮格是一種頁面布局模式，其中，頁面被分成九個等寬區域，以使按鈕和其他重要元素更具吸引力、更注重用戶體驗。在本文中，我們將詳細說明如何使用CSS在網站或應用中創建九宮格按鈕。

/* 首先，創建一個div來作為九宮格容器 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}
/* 創建一個九宮格內單個按鈕的樣式 */
.grid-item {
text-align: center;
color: #fff;
background-color: #333;
padding: 10px;
}
/* 對特定按鈕使用不同的樣式，使其更加突出 */
.grid-item.one {
background-color: #f44336;
}
.grid-item.two {
background-color: #e91e63;
}
.grid-item.three {
background-color: #9c27b0;
}
.grid-item.four {
background-color: #3f51b5;
}
.grid-item.five {
background-color: #2196f3;
}
.grid-item.six {
background-color: #4caf50;
}
.grid-item.seven {
background-color: #ffc107;
}
.grid-item.eight {
background-color: #ff5722;
}
.grid-item.nine {
background-color: #607d8b;
}

在上面的代碼中，我們使用了CSS網格（grid）布局來創建一個九宮格容器，其包含三列和三行。我們還使用了gap屬性，這個屬性定義了每個網格項目之間的間隔距離。接著，我們定義了九個具有不同樣式的網格項目，用不同的顏色突出每個按鈕。

使用九宮格按鈕不僅能夠讓網站或應用程序看起來更美觀，而且也能夠讓用戶更輕松地瀏覽。在自己的網站或應用上嘗試使用九宮格按鈕，看看它是否能夠為您帶來更多的流量和收益。