當今社交媒體和移動應用程序的快速發展使得手機成為幾乎每個人都必備的工具。作為開發者，我們需要確保我們的應用程序易于使用并且具有吸引人的界面。其中一個方法就是使用 CSS 按鈕滑動效果，這可以使您的應用程序更加專業和現代。

.button {
border-radius: 4px;
background-color: #3498db;
width: 100px;
text-align: center;
padding: 12px 0;
color: #fff;
font-weight: 600;
cursor: pointer;
position: relative;
overflow: hidden;
}
.button:after {
content: "";
display: block;
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background-color: rgba(255, 255, 255, 0.1);
transform: rotate(45deg);
transition: all 0.5s ease-out;
}
.button:hover:after {
top: -5%;
left: -5%;
}

這段 CSS 代碼創建了一個具有滑動效果的按鈕。我們首先設置了按鈕的基本樣式，設置了背景色、文本顏色、寬度和高度等等。接下來，我們使用`position:relative`屬性使按鈕成為相對定位，然后我們設置了一個`overflow:hidden`屬性來隱藏按鈕的偽元素。

然后我們使用`:after`偽元素來創建一個四分之一的半透明方塊。我們調整它的位置和大小，以便它剛好超出按鈕的邊界。我們還添加了一個旋轉：45度的旋轉效果，并且設置了顏色RGBA，使其既能看到網頁的背景色又不會過于明顯。

最后，我們使用`transition: all 0.5s ease-out`屬性來添加一個平滑的動畫效果，使偽元素隨著按鈕的懸停而移動。按鈕要使用:hover屬性，以便動畫只有在鼠標懸停在上面時才出現。

使用這段 CSS 代碼可以為你的應用程序添加一個簡單而現代的滑動效果。記住，您可以自定義按鈕的顏色，大小和文本內容等更多屬性來適應您的應用程序。