CSS是前端開發中不可或缺的一部分，通過CSS可以實現網頁的樣式和布局。在手機端開發中，常常需要設計不同樣式的按鈕，其中最常見的是豎著的按鈕。接下來我將介紹關于CSS手機豎著的按鈕的相關知識。

.btn {
width: 50px;
height: 100px;
background-color: #ccc;
position: relative;
border-radius: 10px;
overflow: hidden;
}
.btn:before,
.btn:after {
content: '';
position: absolute;
width: 10px;
height: 20px;
bottom: 10px;
background-color: #fff;
transform: rotate(45deg);
left: 50%;
margin-left: -5px;
}
.btn:after {
transform: rotate(-45deg);
}

以上代碼實現了一個寬50px，高100px，帶描邊的豎著的按鈕，其中‘before’和‘after’為偽元素，主要用來實現按鈕的兩個角落的三角形。通過‘position’和‘transform’屬性，可以對偽元素進行定位和旋轉操作。

在實際開發中，我們可以根據自己的需求修改這些屬性，例如改變按鈕的大小、顏色及描邊等，同時還可以給按鈕添加點擊事件等。

總之，通過CSS可以輕松地實現手機豎著的按鈕，進而為我們的手機頁面設計提供更多選擇和可能性。