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代码，以适应不同的按钮和菜单样式。