CSS按鈕滑出出菜單是網頁設計中廣泛使用的一種交互效果。它能夠在頁面上創建一個簡單且易于使用的菜單，同時增強頁面的交互性。

要創建一個滑出菜單按鈕，首先需要創建一個HTML按鈕元素。按鈕可以是一個按鈕，也可以是一個超鏈接。

<button>菜單</button>

之后，在CSS樣式表中，我們需要設置按鈕的樣式和滑出的菜單的樣式。

/*按鈕樣式*/
button {
background-color: #4CAF50; /*設置按鈕背景顏色*/
border: none; /*去掉按鈕的邊框*/
color: white; /*設置按鈕文字顏色*/
padding: 10px 20px; /*設置按鈕內邊距*/
font-size: 16px; /*設置按鈕文字大小*/
cursor: pointer; /*設置光標類型為手型*/
}
/*滑出菜單樣式*/
.menu {
display: none; /*初始情況下，菜單不可見*/
position: absolute; /*設置菜單為絕對定位*/
background-color: #f1f1f1; /*設置菜單背景顏色*/
min-width: 160px; /*設置菜單最小寬度*/
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /*設置菜單陰影*/
z-index: 1; /*設置菜單的層級*/
}
/*鼠標移動到按鈕上時，顯示菜單*/
button:hover + .menu {
display: block;
}
/*設置菜單下拉時的動畫效果*/
.menu {
transform: translateX(-100%); /*將菜單向左移動*/
transition: transform 0.5s ease-out; /*添加過渡效果*/
}
button:hover + .menu {
transform: translateX(0); /*將菜單恢復原來位置*/
}

以上代碼中，我們設置了一個class為menu的滑出菜單，并通過CSS選擇器控制了當鼠標移動到按鈕上時，菜單的顯示和隱藏。

另外，我們通過transform屬性和transition屬性實現了菜單的滑入滑出效果。transform屬性用于移動菜單的位置，transition屬性用于添加動畫效果。

在實際應用中，可以根據需要調整以上CSS代碼，以適應不同的按鈕和菜單樣式。